Canvas hat

by Alon Rotem

HTML

<canvas id="chart-canvas"></canvas>

CSS

#chart-canvas {
  border: 1px solid black;
}

JavaScript

var rights = [5.5, 7, 8, 8.5];
var top = 10;
var lefts = [5, 5, 7, 8, 8.5 ];
var crown = 10.5;
var crown_length = 4;



var canvas = document.getElementById("chart-canvas");
canvas.width = window.innerWidth - 100; 
canvas. height = window.innerHeight - 100;
var ctx = canvas.getContext('2d');
var cursor = {
  x: undefined,
  y: undefined
};

canvas.addEventListener("mousemove", (e) => {
  cursor.x = e.offsetX;
  cursor.y = e.offsetY;
});
canvas.addEventListener ("mouseout", (e) => {
  cursor.x = undefined;
  cursor.y = undefined;
}, false);


function drawHat()
{
  for (var i=0; i < crown_length; i++)
  {
  	ctx.beginPath();
		ctx.strokeRect(0, 0 + 10 * i, 30, 10);
  }
	ctx.strokeText("Hello", 200, 200)
  
  	ctx.beginPath();
	ctx.arc((canvas.width/2), canvas. height-150, 150, 0, Math.PI*10, true);
  //ctx.closePath();
  //ctx.fillStyle = 'red';
  //ctx.fill();
  ctx.strokeStyle = 'green';
  ctx.stroke();
  //ctx.closePath();

 // ctx.beginPath();
 // ctx.arc((canvas.width/2), canvas. height-50, 80, 0, Math.PI, true);
  //ctx.closePath();
 // ctx.lineWidth = 2;
  //ctx.fillStyle = 'red';
  //ctx.fill();
  //ctx.strokeStyle = 'red';
  //ctx.stroke();
}

function drawChart(){
	ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
  //console.log(canvas.width + ", " + canvas.height)
    //drawTooltip("click to learn more!", 16);
    drawHat();

	requestAnimationFrame(drawChart);
}
requestAnimationFrame(drawChart);