Drawing two rectangles on a canvas

suggest change
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <title>Draw two rectangles on the canvas</title>
          border:1px solid gray;
    <script async>
      window.onload = init; // call init() once the window is completely loaded
      function init(){
        // #1 - get reference to <canvas> element
        var canvas = document.querySelector('canvas');
        // #2 - get reference to the drawing context and drawing API
        var ctx = canvas.getContext('2d');

        // #3 - all fill operations are now in red
        ctx.fillStyle = 'red'; 

        // #4 - fill a 100x100 rectangle at x=0,y=0
        // #5 - all fill operations are now in green
        ctx.fillStyle = 'green'; 
        // #6 - fill a 50x50 rectangle at x=25,y=25
  <canvas width=300 height=200>Your browser does not support canvas.</canvas>

This example looks like this:

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents