Drawing an Image to the Canvas

by Samyoul

HTML

<canvas id="c" width="800" height="400"></canvas>

CSS

body {
    background: #fff;
}

JavaScript

function roundedRect(canvasContext, startX, startY, width, height, tlCornerRadius, trCornerRadius, brCornerRadius, blCornerRadius){
    
    if(typeof(trCornerRadius) == "undefined"){
        trCornerRadius = tlCornerRadius;
        brCornerRadius = tlCornerRadius;
        blCornerRadius = tlCornerRadius;
    }
    
    //Move to starting position
    canvasContext.moveTo(startX + tlCornerRadius, startY);
    //Draw top line
    canvasContext.lineTo(startX + width - trCornerRadius, startY);
    //Draw top right corner
    canvasContext.arcTo(startX + width, startY, startX + width, startY + trCornerRadius, trCornerRadius);
    //Draw right line
    canvasContext.lineTo(startX + width, startY + height - brCornerRadius);
    //Draw bottom right corner
    canvasContext.arcTo(startX + width, startY + height, startX + width - brCornerRadius, startY + height, brCornerRadius);
    //Draw bottom line
    canvasContext.lineTo(startX + blCornerRadius, startY + height);
    //Draw bottom left corner
    canvasContext.arcTo(startX, startY + height, startX, startY + height - blCornerRadius, blCornerRadius);
    //Draw left line
    canvasContext.lineTo(startX, startY + tlCornerRadius);
    //Draw top left corner
    canvasContext.arcTo(startX, startY, startX + tlCornerRadius, startY, tlCornerRadius);
}

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {

    // Save the state, so we can undo the clipping
    ctx.save();
    
    //Background shape
    Background = new Path2D();
    Background.moveTo(0, 0);
    Background.arc(canvas.width/2, (canvas.height/20)*-1, canvas.width/2, (canvas.height/20)*-1, 2 * Math.PI, false)
    
    //Background shadow
    ctx.shadowColor = "black";
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = canvas.width/100;
    
   ...