JSFiddle - React, Tailwind, and code Playground

by Mohd Zaki

HTML

<canvas id="image"></canvas>

CSS

canvas {
max-width: 100%;
height: auto;
}

JavaScript

var canvas = document.getElementById('image');
var ctx = canvas.getContext('2d');

var img = new Image();

img.onload = function(){
canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
ctx.drawImage(img, 0, 0);
  
ctx.font = "20px Arial";
ctx.fillStyle = "Black";      
ctx.fillText("Nama : ",160,600); 

ctx.font="40px Courier New";
ctx.fillStyle = "Black";        
ctx.fillText("No Kad Pengenalan : ",630,710);
  
ctx.font = "70px Courier New";
ctx.fillStyle = "Black";      
ctx.fillText("Kod Majikan",160,800);   
}

img.src = 'http://test.kpkt.gov.my/ikpm/green.jpg';