HTML Canvas

By | February 1, 2020

If we want to draw graphics on a web page, then we can use the HTML5 canvas through JavaScript. The canvas element has no design of its own, it only serves as a container. With the help of canvas, you can make a box on a web page or do some other drawing. Canvas takes its height and width by default. Later, if we want to change its height and width, we can help with CSS.

By default there is nothing on the canvas it is like a container.

Example:-

<canvas id="myCanvas" width="210" height="140"></canvas>

<canvas> Browser Support:-

All modern browsers support HTML5 canvas.

HTML5 <canvas> Example:-


<canvas id="myCanvas" width="210" height="140" style="border:2px solid black;">
	Your browser does not support the HTML5 canvas tag.
</canvas>

Output:-

canvas image

Path and Shapes on <canvas>:-

In this we will see how we can create graphics on a web page from the canvas through the medium of JavaScript.

Line Styles:-

lineJoin:-

Using lineJoin property, we can style the line as follows.


<canvas id="myCanvas" width="210" height="140" style="border:2px solid black;">
	Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var a = document.getElementById("myCanvas");
var ctx = a.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 8;
ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
ctx.stroke();
</script>

</body>

lineCap:-

Using lineCap property, we can style the line as follows.


<body>
<canvas id="myCanvas" width="210" height="140" style="border:2px solid black;">
	Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var a = document.getElementById("myCanvas");
var ctx = a.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 8;
ctx.lineCap = "butt";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20, 40);
ctx.lineTo(200, 40);
ctx.stroke();

</script>

</body>

Output:-

canvas image

lineWidth:-

Using lineWidth property, we can style the line as follows.

<body>
	

<canvas id="myCanvas" width="210" height="140" style="border:2px solid black;">
	Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var a = document.getElementById("myCanvas");
var ctx = a.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 8;
ctx.strokeRect(20,20,80,100);
</script>

</body>

Output:-

canvas image

miterLimit:-

Using miterLimit property, we can style the line as follows.

<body>
	

<canvas id="myCanvas" width="210" height="140" style="border:2px solid black;">
	Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var a = document.getElementById("myCanvas");
var ctx = a.getContext("2d");
ctx.lineWidth = 8;
ctx.lineJoin = "miter";
ctx.miterLimit = 5;
ctx.moveTo(20, 20);
ctx.lineTo(50, 27);
ctx.lineTo(20, 34);
ctx.stroke();

</script>

</body>

Output:-

canvas image

Create a circle:-


<body>

<canvas id="myCanvas" width="210" height="140" style="border:2px solid black;">
	Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var a = document.getElementById("myCanvas");
var ctx = a.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2 * Math.PI);
ctx.stroke();
</script>

</body>

Output:-

circle image

Canvas closePath:-

<body>

<canvas id="myCanvas" width="210" height="140" style="border:2px solid black;">
	Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var a = document.getElementById("myCanvas");
var ctx = a.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
</script>

</body>

Output:-

canvas close path
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *