JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<div></div>

CSS

canvas {
    border: 1px red solid;
    x-webkit-transform: scale(2);
    x-webkit-transform-origin: 0 0;
}

JavaScript

var $canvas = $("<canvas>").attr({
    'width': '100px',
    'height': '200px'
});

$("div").append($canvas);
var $clonedCanvas;
if ($canvas[0].getContext) {
    var context = $canvas[0].getContext('2d');
    
    context.lineWidth = 1;
    context.moveTo(0, 90);  context.lineTo(0, 100);
    context.moveTo(10, 90); context.lineTo(10, 100);
    context.moveTo(20, 90); context.lineTo(20, 100);
    context.stroke();
    context.font = '10px sans-serif';
    context.fillText('1234567890.5', 10, 40);
    alert(context.measureText(3).width);
    context.fillText(-353, 20, 0);
    var imageData = context.getImageData(0, 0, 100, 200);
    $clonedCanvas = $canvas.clone();
    $clonedCanvas[0].getContext('2d').putImageData(imageData, 0, 0);
} else {
  // canvas not supported - need fall back
}

$("div").append($clonedCanvas);