JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<canvas width="400" height="400"></canvas>

JavaScript

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

var img = new Image();
img.src = 'https://en.m.wikipedia.org/wiki/Scalable_Vector_Graphics#/media/File%3ASVG_Logo.svg';

img.onload = function() {
	var canvasW = canvas.width, canvasH = canvas.height;
	var imgW = img.naturalWidth || canvasW, imgH = img.naturalHeight || canvasH;

	var ratio = canvasW/imgW;

	console.log(imgW, imgH, canvasW, canvasH);
	
	ctx.drawImage(img, 0, 0, imgW * ratio, imgH*ratio);
}