HTML5 Canvas Example

by gamealchemist

HTML

<canvas id="canvas" width="480" height="320"></canvas>

JavaScript

$(document).ready(function () {
    var d_canvas = document.getElementById('canvas');
    var context = d_canvas.getContext('2d');

    context.lineWidth = 2;
    context.strokeStyle = "red";
    
    context.beginPath();
    var circle_x = 150;
    var circle_y = 150;
    var radius = 50;
    var corners = 10;
    var width = (radius * 2) / 1.1
    var height = 50;
    var x = circle_x - width / 2;
    var y = circle_y - 70;
    context.moveTo(x + corners, y);
    context.lineTo(x + width - corners, y);
    context.quadraticCurveTo(x + width, y, x + width, y + corners);
    context.lineTo(x + width, y + height - corners);
    context.quadraticCurveTo(x + width, y + height, x + width - corners, y + height);
    context.lineTo(x + corners, y + height);
    context.quadraticCurveTo(x, y + height, x, y + height - corners);
    context.lineTo(x, y + corners);
    context.quadraticCurveTo(x, y, x + corners, y);
    context.fillStyle = "#000000";
    context.fill();
    context.stroke();

    context.beginPath();
    context.arc(circle_x, circle_y, radius, 0, 2 * Math.PI);
    context.fillStyle = "#000000";
    context.fill();

    context.save();
    // clip the whole canvas...
    clipCanvas();
    // then draw a hole with the upper rect
    context.moveTo(x, y);
    context.lineTo(x, y + height);
    context.lineTo(x + width, y + height);
    context.lineTo(x + width, y);
    context.lineTo(x, y);
    context.clip();
    // stroke the circle = everywhere except in the rect
    context.beginPath();
    context.lineWidth = 2;
    context.arc(circle_x, circle_y, radius, 0, 2 * Math.PI);
    context.stroke();
    context.restore();

    function clipCanvas() {
        context.beginPath();
        context.lineWidth = 0;
        context.moveTo(0, 0);
        context.lineTo(context.canvas.width, 0); // width/h should be cached if performance matters.
        context.lineTo(context.canvas.width, context.canvas.height);
        context.lineTo(0, context.canvas.height);
     ...