JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

JavaScript

var mainrender = document.createElement('canvas');
var mc = mainrender.getContext('2d');
mainrender.width = document.body.clientWidth;
mainrender.height =document.body.clientHeight;
var smallimage = {canvas:canvas,
                  width:200,
                  height:200};
var largerimage = {canvas:mainrender,
                    width:mainrender.width,
                   height:mainrender.height};
canvas.style.visible = false;
document.body.appendChild(mainrender);
// this makes the canvas invisible so it doesn't have to render it but it will still calculate it just in a buffer. you only need to do this once.


//after every finished set of rendering for the small canvas run this.
mc.drawImage(smallimage.canvas,0,0,smallimage.width,smallimage.height,0,0,largerimage.width,largerimage.height);
// if this isn't clear its drawImage( source image, source x, source y, source width, source height, dest x , dest y, dest width, dest height);