JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<img id='imgmap'  src="http://www.isu.hadiismail.com/css/img/dottedwm.png"><canvas id='canvas'></canvas></img>

CSS

canvas{
    z-index:100;
        position:fixed;
    top:0px;
    bottom:0px;
    margin:auto 0px auto 0px ;
    left:0px;right:0px;
    width:100%;
    height:100%;
    vertical-align:center;
}
img{
    position:fixed;
    top:0px;
    bottom:0px;
    margin:auto 0px auto 0px ;
    left:0px;right:0px;
    width:100%;
    height:auto;
    vertical-align:center;
}
body{
    background-color:#222;
}

JavaScript

var canvas = document.getElementById('canvas');
canvas.width = document.getElementById('imgmap').style.innerWidth;
canvas.height = document.getElementById('imgmap').style.getPropertyValue('height');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#f00";
ctx.fillText('something',100,100,100);