Canvas pre render example

by erickzanardo

HTML

<canvas id='mycanvas' width='300' height='300'></canvas>

CSS

canvas {
    border: 1px solid #000;
}

JavaScript

var rendered = document.createElement('canvas');
rendered.width = 100;
rendered.height = 70;

var renderedCtx = rendered.getContext('2d');
renderedCtx.fillStyle = '#E5E5E5';
renderedCtx.fillRect(5, 30, 90, 30); // Lateral
renderedCtx.fillRect(30, 5, 40, 30); // Lateral

renderedCtx.fillStyle = '#000';

// Roda 1
renderedCtx.beginPath();
renderedCtx.arc(30, 60, 10, 0, Math.PI*2, true); 
renderedCtx.closePath();
renderedCtx.fill();

// Roda 2
renderedCtx.beginPath();
renderedCtx.arc(75, 60, 10, 0, Math.PI*2, true); 
renderedCtx.closePath();
renderedCtx.fill();

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

ctx.drawImage(rendered, 10 ,10);