JavaScript Projects for Kids

Drawing a rectangle

To test our canvas, let's draw a rectangle in the canvas by typing the following code:

<script type="text/javascript">
  var canvas = document.getElementById("canvasTest"); //called our canvas by id
  var canvasElement = canvas.getContext("2d"); // made our canvas 2D
  canvasElement.fillStyle = "black"; //Filled the canvas black
  canvasElement.fillRect(10, 10, 50, 50); //created a rectangle
</script>

In the script, we declared two JavaScript variables. The canvas variable is used to hold the content of our canvas using the canvas ID, which we used in our <canvas></canvas> tags. The canvasElement variable is used to hold the context of the canvas. We assign black to fillstyle so that the rectangle that we want to draw turns black when ...