JSFiddle - React, Tailwind, and code Playground

by Marcus Carey

HTML

<img id="personPin"  src="https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/location-alt-512.png" height="30" width="30" />
<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
canvas.height = 30;
canvas.width = 30;
var ctx = canvas.getContext('2d');
const personPin = document.querySelector('#personPin');
ctx.beginPath();
ctx.drawImage(personPin, 0, 0, 30, 30);
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 30, 30);
ctx.closePath();