JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<canvas id="canvas" width="520" height="520"></canvas>

JavaScript

var ctx = $('#canvas')[0].getContext('2d');

// context.rect(offsetX, offsetY, Width, Height);
ctx.rect(10, 10, 500, 500);

var base_image = new Image();
base_image.src = 'http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg';
base_image.onload = function(){
    //Once the image is loaded, draw it.
    //context.drawImage(image, offsetX, offsetY, width, height);
    ctx.drawImage(base_image, 0, 0,500,500);
    
    //Border
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 10;
    ctx.stroke();
};