making shapes in canvas

by Jesse M

HTML

<canvas id="myCanvas" width="200" height="200" />

<!-- http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/ -->

CSS

canvas {
    border: 3px solid #ccc;
    margin: 30px;
}

JavaScript

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;
    console.log(x, y);
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

// Add element.
elements.push({
    color: '#05EFFF',
    width: 150,
    height: 100,
    top: 20,
    left: 15
},
{
    color: '#000000',
    width: 80,
    height: 40,
    top: 140,
    left: 30
},
{
    color: '#ff0000',
    width: 20,
    height: 20,
    top: 175,
    left: 150
});

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.color;
    context.fillRect(element.left, element.top, element.width, element.height);
});



var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 50;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'rgba(0,0,0,.5)';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();