JSFiddle - React, Tailwind, and code Playground

by Mohd Zaki

HTML

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

CSS

canvas {
max-width: 100%;
height: auto;
border-radius: 15px;
border:1px solid rgba(0,0,0,0.11);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.11);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.11);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.11);
}

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 = "bold 45pt Arial";
ctx.fillStyle = "White";      
ctx.fillText("KAD AHLI", 320, 150);

ctx.font = "24pt Arial";
ctx.fillStyle = "Black";      
ctx.fillText("Nama", 50, 400);

ctx.font = "24pt Arial";
ctx.fillStyle = "Black";      
ctx.fillText(": Mohamad Zaki Mustafa", 325, 400);


ctx.font = "30px Arial";
ctx.fillStyle = "Black";        
ctx.fillText("No Kad Pengenalan : 830411-13-5069",50,450);
  
ctx.font = "30px Arial";
ctx.fillStyle = "Black";      
ctx.fillText("Kod Majikan",50,500); 

ctx.font = "30px Arial";
ctx.fillStyle = "Black";      
ctx.fillText(": 12290",328,500); 

  
ctx.font = "30px Arial";
ctx.fillStyle = "Black";      
ctx.fillText("Kod Cawangan",50,550); 


ctx.font = "30px Arial";
ctx.fillStyle = "Black";      
ctx.fillText(": F01",328,550); 

ctx.font = "20px Arial";
ctx.fillStyle = "Black";      
ctx.textAlign = "right"; 
ctx.fillText("Kesatuan Kebangsaan Penolong Pegawai Perubatan Semenanjung",(canvas.width)-20,(canvas.height) -45); 

ctx.font = "20px Arial";
ctx.fillStyle = "Black";      
ctx.textAlign = "right"; 
ctx.fillText("No Pendaftaran : 248",(canvas.width)-20,(canvas.height) -20); 
}

img.src = 'http://test.kpkt.gov.my/ikpm/blue.png';