What is HTML5 canvas?

HTML & CSS
1

Whats the use of HTML5 canvas and how important is it for a web developer to have knowledge about it? Just wondering. I’m happy learning to code but canvas appears to be more about design and I suck at drawing and creating designs.

2

I’ve mostly used it for creating HTML5 games but there are other uses. I doubt you will need to use it much for designing websites, but it can be good for interactive elements and using JavaScript with it.

3

Canvas is a graphic area ( not to be confused with a FIGURE or IMG). Think of it as sort of like FLASh but without having to import a FLASH file. The contents can be controlled, animated, etc using javascript .

example:

 <canvas id="myCanvas"></canvas>

<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

hope that helps

4

The <canvas> element is used to draw graphics on a web page via scripting like javascript.
canvas is used for drawing paths, boxes, circles, text, and adding images.

syntax:
<canvas id=“draw” width=“350” height=“200”></canvas>
and then adding the script coding for drawing circle.

if you want know more about <canvas> look at w3schools html5 tutorial.

5