HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
All drawing on the HTML canvas must be done with JavaScript
All drawing on the HTML canvas must be done with JavaScript:
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
First of all, you must find the <canvas> element.
This is done by using the HTML DOM method getElementById():
var canvas = document.getElementById("myCanvas");
Secondly, you need a drawing object for the canvas.
The getContext() is a built-in HTML object, with properties and methods for drawing:
var ctx = canvas.getContext("2d");
Finally, you can draw on the canvas.
Set the fill style of the drawing object to the color red:
ctx.fillStyle = "#FF0000";
The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is black.
The fillRect(x,y,width,height) method draws a rectangle, filled with the fill style, on the canvas:
ctx.fillRect(0, 0, 150, 75);