Canvas example

Example of drawing a rectangle and circle using canvas.

by realhunts

HTML

<canvas width="640" height="480"></canvas>

JavaScript

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// global colors
ctx.strokeStyle = 'white';
ctx.fillStyle = 'skyblue';

// draw rectangle (x position, y position, width, height)
//ctx.fillRect(300, 200, 50, 50);

 var hs = [ 0.25, 1.0, 4.0, 0.0, 0.0, -1.0, -2.0, -2.0, -1.25, 0.0 ];

  var x = 20.0, y1 = 0.0, dx = 5.0;

ctx.fillRect(x, y1, 5, 5);
  for (var i = 0; i < 10; ++i) {
    var y2 = hs[i];
    ctx.fillRect(x + dx, y2, 5, 5);
    y1 = y2;
    x += dx;
  }
  
//ctx.strokeRect(300, 200, 50, 50);