Applying Styles and Colors in html canvas
Applying
Styles and Colors on Stroke
The
default color of the stroke is black and its thickness is one pixel. But, you
can set the color and width of the stoke using the strokeStyle and lineWidth property
respectivley.
The
following example will draw an orange color line having 5 pixels width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Stroke Color and Width on the
Canvas</title>
<style>
canvas {
border:
1px solid #000;
}
</style>
<script>
window.onload =
function() {
var canvas
= document.getElementById("myCanvas");
var context
= canvas.getContext("2d");
context.lineWidth = 5;
context.strokeStyle = "orange";
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
</head>
<body>
<canvas
id="myCanvas" width="300"
height="200"></canvas>
</body>
</html>
Filling Colors inside Canvas Shapes
You can also fill color
inside the canvas shapes using the fillStyle() method.
The following example will
show you how to fill a solid color inside a rectangle shape.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filling Color inside a Rectangle on the
Canvas</title>
<style>
canvas {
border:
1px solid #000;
}
</style>
<script>
window.onload =
function() {
var canvas
= document.getElementById("myCanvas");
var context
= canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas
id="myCanvas" width="300"
height="200"></canvas>
</body>
</html>
Filling
Gradient Colors inside Canvas Shapes
You
can also fill gradient color inside the canvas shapes. A gradient is just a
smooth visual transition from one color to another. There are two types of
gradient available — linear and radial.
The
basic syntax for creating a linear gradient can be given with:
var grd = context.createLinearGradient(startX,
startY, endX, endY);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filling Linear Gradient inside Canvas
Shapes</title>
<style>
canvas {
border:
1px solid #000;
}
</style>
<script>
window.onload =
function() {
var canvas
= document.getElementById("myCanvas");
var context
= canvas.getContext("2d");
context.rect(50, 50, 200, 100);
var grd =
context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>
</head>
<body>
<canvas
id="myCanvas" width="300"
height="200"></canvas>
</body>
</html>
Similarly,
you can fill canvas shapes with radial gradient using the createRadialGradient() method.
The basic syntax for creating a radial gradient can be given with:
var grd = context.createRadialGradient(startX,
startY, startRadius, endX, endY, endRadius);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filling Radial Gradient inside Canvas
Shapes</title>
<style>
canvas {
border:
1px solid #000;
}
</style>
<script>
window.onload =
function() {
var canvas
= document.getElementById("myCanvas");
var context
= canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
var grd =
context.createRadialGradient(150, 100, 10, 160, 110, 100);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>
</head>
<body>
<canvas
id="myCanvas" width="300"
height="200"></canvas>
</body>
</html>
Drawing Text on Canvas
You can also draw text onto
canvas. These texts can contain any Unicode characters. The following example
will draw a simple greeting message "Hello World!" onto a canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing Text on the Canvas</title>
<style>
canvas {
border:
1px solid #000;
}
</style>
<script>
window.onload =
function() {
var canvas
= document.getElementById("myCanvas");
var context
= canvas.getContext("2d");
context.font = "bold 32px Arial";
context.fillText("Hello World!", 50, 100);
};
</script>
</head>
<body>
<canvas
id="myCanvas" width="300"
height="200"></canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adding Stroke to Canvas Text</title>
<style>
canvas {
border:
1px solid #000;
}
</style>
<script>
window.onload =
function() {
var canvas =
document.getElementById("myCanvas");
var context
= canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.strokeStyle = "orange";
context.strokeText("Hello World!", 150, 100);
};
</script>
</head>
<body>
<canvas
id="myCanvas" width="300"
height="200"></canvas>
</body>
</html>
Comments
Post a Comment