Simple canvas example

Simple drawing on canvas with a general use object.

by mhctoledo

HTML

<div id="container">
    <div class="instruments">
      <img id="circle" src=""/>
    </div>
</div>

CSS

body {
      margin: 0;
      padding: 0;
    }

    #container {
      position: relative;
      padding-top: 32%;
      background-color: #88f;
    }

    .instruments {
      position: absolute;
      bottom: 0%;
      width: 100%;
      padding-bottom: 16%;
      background-color: #8f8;
    }

    #circle {
      position: absolute;
      left: 42%;
      width: 16%;
    }

JavaScript

var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");

    // Default canvas is 300x150, so make it square
    canvas.height = canvas.width = 300;  

    ctx.beginPath();
    ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();

    var img = document.getElementById('circle');
    img.src = canvas.toDataURL();