JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<div id="wrapper">
  <canvas id="canvas"></canvas>
</div>

CSS

#wrapper {
  width: 500px;
  height: 500px;
}

#canvas {
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

JavaScript

const imgURL = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKj-oh8L9AYORj5OaXbSQ1oA5S-ZF0g2TkdUCkrrXiSckMVANo";

const canvas = document.querySelector("#canvas")
const ctx = canvas.getContext('2d')
//ctx.scale(2,2);
ctx.width = canvas.width;
ctx.height = canvas.height;


const img = new Image();
img.src = imgURL;
img.onload = function(){
    draw(this);
}

function draw() {
	const x = canvas.width / 2;
  const y = canvas.height / 2;
  
  
	ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width / 4, img.height / 4)
	//drawImage(image, image.width / 2, image.height / 2, 1, 90);
  //drawImageCenter(image, image.width / 2, image.height / 2, image.width / 2, image.height / 2, 0.5, 45);
}

/* // no need to use save and restore between calls as it sets the transform rather 
// than multiply it like ctx.rotate ctx.translate ctx.scale and ctx.transform
// Also combining the scale and origin into the one call makes it quicker
// x,y position of image center
// scale scale of image
// rotation in radians.
function drawImage(image, x, y, scale, rotation){
    ctx.setTransform(scale, 0, 0, scale, x, y); // sets scale and origin
    ctx.rotate(rotation);
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
} 
// same as above but cx and cy are the location of the point of rotation
// in image pixel coordinates
function drawImageCenter(image, x, y, cx, cy, scale, rotation){
    ctx.setTransform(scale, 0, 0, scale, x, y); // sets scale and origin
    ctx.rotate(rotation);
    ctx.drawImage(image, -cx, -cy);
}  */