Working with canvas

by Marcus Baptiste

HTML

<canvas id='canvas' width='400' height='300'>
    <h2>Booo - your browser doesn't support canvas</h2>
</canvas>


<button id='btn-basic'>Basic Drawing</button>
<button id='btn-path2d'>Path2D/Advanced Drawing</button>
<button id='btn-images'>Images</button>
<button id='btn-trans'>Transformations</button>
<button id='btn-comp'>Compositing</button>
<button id='btn-basic-anim'>Basic Animations</button>
<button id='btn-adv-anim'>Animation with Physics</button>

CSS

body {
    position: relative;
}

canvas {
    position: relative;
    width: 400px; height: 300px;
    border: 2px solid black;
    display: block;
    margin: 10px auto;
}

JavaScript

var canvas = document.getElementById('canvas');
var btnBasic = document.getElementById('btn-basic');
var btnPath2D = document.getElementById('btn-path2d');
var btnImages = document.getElementById('btn-images');
var btnTrans = document.getElementById('btn-trans');
var btnComp  = document.getElementById('btn-comp');
var btnBasicAnim = document.getElementById('btn-basic-anim');
var btnAdvAnim = document.getElementById('btn-adv-anim');
var animating = 0;

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

function drawControlPoint(posX, posY, context) {
    context.moveTo(posX, posY);
    context.beginPath();
    context.fillStyle = '#f00';
    context.fillRect(posX -2, posY - 2, 4, 4);
}

function drawAdvAnim() {
    //second animation example with interaction and physics
    animating = 2;
    ctx.save();
    function getMousePos(event) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        }
    }
    
    var mousePos = { x: 0, y: 0 };
    
    var ball = {
        x: 50,
        y: 50,
        vx: 5,
        vy: 2,
        radius: 20,
        color: 'blue',
        draw: function() {  
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI *2, true);
            ctx.closePath();
            ctx.fill();
        }
    }
    
    function draw() {
        ctx.fillStyle = 'rgba(255,255,255,0.3)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ball.draw();
        ball.x += ball.vx;
        ball.y += ball.vy; 
        ball.vy *= .99;
        ball.vy += .25;
        
        if (ball.x + ball.vx >= canvas.width - 15
            || ball.x + ball.vx <= 15) {
            ball.vx = -ball.vx;
        }
        
        if (ball.y + ball.vy >= canvas.height - 15
           || ball.y + ball.vy <= 15)  {
            ball.vy = -ball.vy;
        }
        
        //display mouse coordinates
       ...