putimagedata

I'm into a 2D/3D graphic project and I'm facing a performance problem. My algorithm takes two images: a picture and the relative grayscale depth map. I have also an array of 10 canvases ("layers") initally blank. A note: all the images have the same dimension. I need to check every pixel X;Y of the depth map and, depending on its color value, access one of the 10 canvases and draw the X;Y pixel of the original image on it. Resulting algorithm is someting like: for (var y = 0; y < totalHeight; ++y) { for (var x = 0; x < totalWidth; ++x) { var index = (y * totalWidth + x) * 4; // index of the

I am working on a project that can encrypt an image and redraw the decrypted image on canvas. As I am still pretty new to coding and programming, I am currently having issues redrawing the decrypted image data, which is a pixel array in the form R,G,B,A. I thought this would be possible by simply putting the data into ctx.putImageData(imgd,0,0); But firebug tells me that the value does not implement the interface for imagedata. I have posted the entire array here . The image is 160px wide and 120px high. Is there any way to reformat the array so that it is drawable on the canvas? Assuming imgd

How to change putImageData scale with scale(1.5, 1.5) not working.. var imageData = context.getImageData(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height); context.scale(1.5, 1.5); context.putImageData(imageData, 0, 0); Correct, your code will not scale the existing drawings. context.scale only affects new drawings , not existing drawings. context.putImageData will put the saved original pixels back on the canvas, but putImageData is not a drawing command so its results will not be scaled. To scale existing pixels you have to save the pixels to an entity

I am trying to read an entire .pdf Document using PDF.js and then render all the pages on a single canvas. My idea: render each page onto a canvas and get the ImageData (context.getImageData()), clear the canvas do the next page. I store all the ImageDatas in an array and once all pages are in there I want to put all the ImageDatas from the array onto a single canvas. var pdf = null; PDFJS.disableWorker = true; var pages = new Array(); //Prepare some things var canvas = document.getElementById('cv'); var context = canvas.getContext('2d'); var scale = 1.5; PDFJS.getDocument(url).then(function