canvas - American Flag

by Amanda Williamson

HTML

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

CSS

body{
  /*background: linear-gradient(#FF0000, #FFF, #000099);*/
    background: black;
  overflow: hidden;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

function mousedown(e){
  var px = e.pageX;
  var py = e.pageY;
  
  ctx.fillStyle = 'red';  
  ctx.fillRect(px,py,200,130);
  ctx.fillStyle = 'blue'; 
  ctx.fillRect(px,py,70,50);
  ctx.fillStyle = 'white'; 
  ctx.fillRect(px+70,py+10,130,10);
  ctx.fillRect(px+70,py+30,130,10);
  ctx.fillRect(px,py+50,200,10);
  ctx.fillRect(px,py+70,200,10);
  ctx.fillRect(px,py+90,200,10);
  ctx.fillRect(px,py+110,200,10);
};

window.addEventListener('mousedown', mousedown, false);