JSFiddle - React, Tailwind, and code Playground
HTML
Sub-pixel canvas test.<br/>
<canvas id="canvas" width="317" height="351" style="border:solid 1px #000;"></canvas>
JavaScript
var img = new Image();
img.onload = function(){
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
var left = 0;
ctx.drawImage(img, 0, 0, 633, 417);
var start = new Date();
setTimeout(function hey(){
ctx.drawImage(img, left-=0.025, 0, 633, 417);
if(left > -316){
setTimeout(hey, 13);
}
},13);
};
img.src = getImg();
function getImg(){
return 'data:image/png;base64,' +
'iVBORw0KGgoAAAANSUhEUgAAAnkAAAGhCAIAAACS7jUpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFn' +
'ZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/' +
'IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6' +
'bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8w' +
'Mi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y' +
'Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIg' +
'eG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDov' +
'L25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20v' +
'eGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9w' +
'IENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFCNkQ3MTQxOTVFMjExRTA5MTc1' +
'OEJFNjlDODE2MDJGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFCNkQ3MTQyOTVFMjExRTA5MTc1' +
'OEJFNjlDODE2MDJGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6' +
'QUI2RDcxM0Y5NUUyMTFFMDkxNzU4QkU2OUM4MTYwMkYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6' +
'QUI2RDcxNDA5NUUyMTFFMDkxNzU4QkU2OUM4MTYwMkYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRm' +
'OlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65VfzuAADvWklEQVR42uy9TagdV5Yu' +
'GII3yiRfj2QMRYE8SauePHgTSVTDKyhdQcmUEywVtOmBbMtUGoOVeKAEWwYb0gL/QIlukzIk6cZyyiPX' +
...