SVG Canvas Image Rendering

by Vladimir Kutepov

CSS

canvas {
  image-rendering: pixelated;
}

JavaScript

var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');
var image = new Image();
image.onload = () => {
  canvas1.width = 10 * 10 * 2;
  canvas1.height = 10 * 10 * 2;
  context1.drawImage(image, 0, 0, canvas1.width, canvas1.height);
  document.body.appendChild(canvas1);
  canvas2.width = 200;
  canvas2.height = 200;
  canvas2.style.cssText = 'width:100px;height:100px;';
  context2.imageSmoothingEnabled = false;
  context2.scale(2, 2);
  context2.save();
  context2.scale(-1, 1);
  context2.drawImage(canvas1, 0, 0, 100, 100, -100, 0, 100, 100);
  context2.restore();
  document.body.appendChild(canvas2);
};
image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M0,0 L10,10 L0,10z'/%3E%3C/svg%3E";