Canvas Method to Draw different shape like Rectangle, filled rectangle, circle, line, setting style to canvas element
Canvas Example to draw Rectangle
Draw rectangle
ctx.rect(x,
y, width, height);
ctx.stroke();
stroke() is used to draw outline of shape to define color of stroke you can use method
ctx.strokeStyle="white";
Fill rectangle: method is used to filled shape with color default color is black
context.fillRect(x,
y, width, height);
ctx.fill();: using this method you can fill any shape
with color default color is black. you can define fill color of any shape using method
ctx.fillStyle="red";
Stroke rectangle
ctx.strokeRect(x,
y, width, height);
<DOCTYPE html>
<html lang="en">
<head>
<style>
#myCanvas{background-color:orange;
border: 2px solid black;
width:800px;
heigh:400px;}
</style>
</head>
<html lang="en">
<head>
<style>
#myCanvas{background-color:orange;
border: 2px solid black;
width:800px;
heigh:400px;}
</style>
</head>
<body>
<canvas id="myCanvas">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,60,100);
ctx.strokeStyle="white";
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
<canvas id="myCanvas">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,60,100);
ctx.strokeStyle="white";
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
Lets We add Shadow effect To This Rectangle
Canvas methods are
ctx.shadowOffsetX="20";
used to define shadow distance along x axis may be + or -value
ctx.shadowOffsetY="20";
ctx.shadowOffsetY="20";
used to define shadow distance along Y axis may be + or -value
ctx.shadowColor="black";
used to define shadow Color
ctx.shadowBlur="20";
used to define shadow Blur
Lets See Canvas Rectangle Example with Shadow Effect
<DOCTYPE html>
<html lang="en">
<head>
<style>
#myCanvas{background-color:orange;
border: 2px solid black;
width:800px;
heigh:400px;}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var n=800;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,60,100);
ctx.strokeStyle="white";
ctx.fillStyle="red";
ctx.shadowOffsetX="20";
ctx.shadowOffsetY="20";
ctx.shadowColor="black";
ctx.shadowBlur="20";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
<html lang="en">
<head>
<style>
#myCanvas{background-color:orange;
border: 2px solid black;
width:800px;
heigh:400px;}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var n=800;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,60,100);
ctx.strokeStyle="white";
ctx.fillStyle="red";
ctx.shadowOffsetX="20";
ctx.shadowOffsetY="20";
ctx.shadowColor="black";
ctx.shadowBlur="20";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
Canvas Example to draw Circle
Draw circle
ctx.arc(x,
y, radius, 0, Math.PI * 2);
Arc:
context.arc(x,
y, radius, startAngle, endAngle, counterClockwise);
ctx.fill();
ctx.stroke();
·
Styles
Fill
ctx.fillStyle
= 'red';
ctx.fill();
Stroke
ctx.strokeStyle
= 'red';
ctx.stroke();
<DOCTYPE html>
<html lang="en">
<head>
<style>
#myCanvas{background-color:orange;
border: 2px solid black;
width:800px;
heigh:400px;}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var n=800;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.arc(100,70,50,0,2*Math.PI);
ctx.strokeStyle="white";
ctx.stroke();
</script>
</body>
</html>
<html lang="en">
<head>
<style>
#myCanvas{background-color:orange;
border: 2px solid black;
width:800px;
heigh:400px;}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var n=800;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.arc(100,70,50,0,2*Math.PI);
ctx.strokeStyle="white";
ctx.stroke();
</script>
</body>
</html>
<DOCTYPE html>
<html lang="en">
<head>
<style>
#myCanvas{background-color:orange;
border: 2px solid black;
width:800px;
heigh:400px;}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var n=800;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.arc(100,70,50,0,2*Math.PI);
ctx.strokeStyle="white";
ctx.fillStyle="red";
ctx.shadowOffsetX="20";
ctx.shadowOffsetY="20";
ctx.shadowColor="black";
ctx.shadowBlur="20";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
<html lang="en">
<head>
<style>
#myCanvas{background-color:orange;
border: 2px solid black;
width:800px;
heigh:400px;}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var n=800;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.arc(100,70,50,0,2*Math.PI);
ctx.strokeStyle="white";
ctx.fillStyle="red";
ctx.shadowOffsetX="20";
ctx.shadowOffsetY="20";
ctx.shadowColor="black";
ctx.shadowBlur="20";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
<DOCTYPE html>
<html lang="en">
<head>
<style>
#myCanvas{background-color:orange;
border: 2px solid black;
width:800px;
heigh:400px;}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var n=800;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.arc(100,70,50,0,2*Math.PI);
ctx.strokeStyle="white";
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
Linear gradient
var
grd = context.createLinearGradient(x1, y1, x2, y2);
grd.addColorStop(0,
'red');
grd.addColorStop(1,
'blue');
context.fillStyle
= grd;
context.fill();
Radial gradient
var
grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
grd.addColorStop(0,
'red');
grd.addColorStop(1,
'blue');
context.fillStyle
= grd;
context.fill();
Pattern
var
imageObj = new Image();
imageObj.onload
= function() {
var pattern = context.createPattern(imageObj,
'repeat');
context.fillStyle = pattern;
context.fill();
};
imageObj.src
= 'path/to/my/image.jpg';
Line Join
context.lineJoin
= 'miter|round|bevel';
Line Cap
context.lineCap
= 'butt|round|square';
Alpha (Opacity)
context.globalAlpha
= 0.5; // between 0 and 1
·
Color
Formats
String
context.fillStyle
= 'red';
Hex Long
context.fillStyle
= '#ff0000';
Hex Short
context.fillStyle
= '#f00';
RGB
context.fillStyle
= 'rgb(255,0,0)';
RGBA
context.fillStyle
= 'rgba(255,0,0,1)';
·
Paths
Begin Path
context.beginPath();
Line
context.lineTo(x,
y);
Close Path
context.closePath();
Quadratic curve
context.quadraticCurveTo(cx,
cy, x, y);
Bezier curve
context.bezierCurveTo(cx1,
cy1, cx2, cy2, x, y);
·
Images
Draw Image with default size
var
imageObj = new Image();
imageObj.onload
= function() {
context.drawImage(imageObj, x, y);
};
imageObj.src
= 'path/to/my/image.jpg';
·
Text
Fill Text
context.font
= '40px Arial';
context.fillStyle
= 'red';
context.fillText('Hello
World!', x, y);
Stroke Text
context.font
= '40pt Arial';
context.strokeStyle
= 'red';
context.strokeText('Hello
World!', x, y);
Bold Text
context.font
= 'bold 40px Arial';
Italic Text
context.font
= 'italic 40px Arial';
Text Align
context.textAlign
= 'start|end|left|center|right';
Text Baseline
context.textBaseline
= 'top|hanging|middle|alphabetic|ideographic
|bottom';
Get Text Width
var
width = context.measureText('Hello world').width;
·
Transforms
Translate
context.translate(x,
y);
Scale
context.scale(x,
y);
Rotate
context.rotate(radians);
Flip Horizontally
context.scale(-1,
1);
Flip Vertically
context.scale(1,
-1);
Custom Transform
context.transform(a,
b, c, d ,e, f);
Set Transform
context.setTransform(a,
b, c, d ,e, f);
Shear
context.transform(1,
sy, sx, 1, 0, 0);
Reset
context.setTransform(1,
0, 0, 1, 0, 0);
·