High Resolution HTML5 Canvas Screenshot - javascript

I have been trying to take a high resolution screenshot of an HTML5 canvas element that I have for a visualization consisting of rectangles and circles. The canvas.toDataURL() works great, except that the image produced is limited to the size of the original canvas. What I would really like is to take a screenshot that is 4 or 5 times that of the original canvas.
My strategy, however, has been to create a temporary canvas off-screen like the following:
function renderScreenshot(canvas, scaleFactor) {
var ctx = canvas.getContext('2d');
var screenshotCanvas = document.createElement('canvas');
var screenshotCtx = screenshotCanvas.getContext('2d');
screenshotCanvas.width = canvas.width * scaleFactor;
screenshotCanvas.height = canvas.height * scaleFactor;
screenshotCtx.drawImage(canvas, 0, 0, canvas.width * scaleFactor, canvas.height * scaleFactor);
return screenshotCanvas.toDataURL();
}
The problem now is that the scaled image is blurry and pixilated, and does not do me any good. What is the way around this?

Unfortunately, while you can draw paths like you would in a vector image, once they are drawn they become rasterised and cannot be scaled without interpolation.
Instead you would need to completely redraw everything, multiplying all coordinates by your scale factor, to render the path elements properly.

Related

ctx.clearRect canvas sprite

I am wondering how I could alter my Javascript to only clear the falling sprites, and not the entire canvas (as it does currently).
I hope to place multiple other (animated) sprites on the canvas, which do not appear with the way my function animate is structured.
Is there a way so that if there was another image/sprite was on the canvas, it would not be affected by the function animate.
I'm thinking that this line needs to change:
ctx.clearRect(0, 0, canvas.width, canvas.height);
Though I have no idea what parameters I would need to place inside.
The falling sprites draw at a size of 60x60, but as they fall downwards this is where I am a bit stuck with clearing the only the sprite path.
Any help would be appreciated :)
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 1408;
canvas.height = 640;
canvasWidth = canvas.width;
canvasHeight = canvas.height;
var orangeEnemy = new Image();
orangeEnemy.src = "http://www.catholicsun.org/wp-content/uploads/2016/09/cropped-sun-favicon-512x512-270x270.png";
var yellowEnemy = new Image();
yellowEnemy.src = "http://www.clker.com/cliparts/o/S/R/S/h/9/transparent-red-circle-hi.png";
var srcX;
var srcY;
var enemySpeed = 2.75;
var images = [orangeEnemy, yellowEnemy];
var spawnLineY=-50;
var spawnRate=2500;
var spawnRateOfDescent=1.50;
var lastSpawn=-1;
var objects=[];
var startTime=Date.now();
animate();
function spawnRandomObject() {
var object = {
x: Math.random() * (canvas.width - 15),
y: spawnLineY,
image: images[Math.floor(Math.random() * images.length)]
}
objects.push(object);
}
function animate(){
var time=Date.now();
if(time>(lastSpawn+spawnRate)){
lastSpawn=time;
spawnRandomObject();
}
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// move each object down the canvas
for(var i=0;i<objects.length;i++){
var object=objects[i];
object.y += enemySpeed;
ctx.drawImage(object.image, object.x, object.y, 60, 60);
}
}
<html>
<canvas id="canvas" style="border:3px solid"></canvas>
</html>
The easiest and quickest way would be to overlay another canvas, specifically for your sprites, atop your current canvas (requires a bit of CSS). Put all your sprites in one, everything else in the other. The clearRect() in your animate() function will then only apply to your sprite canvas, and not the other.
Otherwise, you will have to keep track of the positions of the sprites, and clear each programatically with 60x60 rectangles using clearRect(offsetX, offsetY, 60, 60).
P.S. excuse the non-formatted answer... still figuring SO out
Clear once for performance.
You are much better off clearing the whole canvas and redrawing the sprites. Using the previous position, checking for overlap and then clearing each sprite in turn, making sure you don't clear an existing sprite will take many more CPU cycles than clearing the screen once.
The clear screen function is very fast and is done in hardware, the following is the results of a performance test on Firefox (currently the quickest renderer) of clearing 65K pixels using just one call for whole area then 4 calls each a quarter, then 16 calls each clearing a 16th. (µs is 1/1,000,000th second)
Each test clears 256*256 pixels Each sample is 100 tests
'Clear 1/1' Mean time: 213µs ±4µs 1396 samples
'Clear 4/4' Mean time: 1235µs ±14µs 1390 samples
'Clear 16/16' Mean time: 4507µs ±42µs 1405 samples
As you can see clearing 65K pixels is best done in one call with the actual javascript call adding about 100µs to do.
On Firefox the number of pixels to clear does not affect the execution time of the call to clearRect with a call clearRect(0,0,256,256) and clearRect(0,0,16,16) both taking ~2µs
Apart from the speed, trying to clear overlapping animated sprites per sprite becomes extremely complicated and can result in 100s of clear calls with only a dozen sprites. This is due to the overlapping.

drawImage() implementation

I have two canvases that are different sizes. My goal is copy the user's drawing from the main canvas to a second canvas as a scaled down version. So far the drawImage() and scale appear to be working, but the second canvas keeps the old version of the main drawing along with the new copy. I tried clearing it each time before calling drawImage(), but that doesn't appear to do anything. How can I copy just the current image to my secondary canvas each time the function runs?
$('#hand').dblclick(function(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//var imageData = context.getImageData(0, 0, 100, 100);
var newCanvas = document.getElementById('scaledCanvas');
var destCtx = newCanvas.getContext('2d');
destCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);
destCtx.scale(.5,.5);
destCtx.drawImage(canvas, 0, 0);
});
I can include more code if necessary. I also just realized that scale keeps getting called; this explains why the new copied image would get smaller each time as well, so that might be another problem.
It's quite simple actually, you're using what's called a transform (translate, rotate, or scale).
In order to use them "freshly" each time you must save and restore the canvas state each time.
$('#hand').dblclick(function(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//var imageData = context.getImageData(0, 0, 100, 100);
var newCanvas = document.getElementById('scaledCanvas');
var destCtx = newCanvas.getContext('2d');
destCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);
//save the current state of this canvas' drawing mode
destCtx.save();
destCtx.scale(.5,.5);
destCtx.drawImage(canvas, 0, 0);
//restore destCtx to a 1,1 scale (and also 0,0 origin and 0 rotation)
destCtx.restore();
});
It's also important to note you can push several times before calling restore, in order to perform many cool geometric tricks using recursive functions etc...
Take a look at this explanation of states and transformations:
https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Transformations
Hope this helps you understand canvas transforms a bit better.

drawImage(HTML5CanvasElement) Firefox Memory Exponential Increase

I'm trying to use JavaScript drawImage to draw from a buffer canvas to another in Firefox; I'm calling the draw multiple times per frame using a fairly large canvas. My memory usage shoots through the roof in Firefox, but barely peaks in Chrome. I'm curious about the reason for this behavior and if there's a workaround to free the memory used (I'm assuming) by drawn images after they're no longer needed.
I need to render using globalCompositeOperation = 'source-in', so that's why I'm using this method.
Here's the basic idea:
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
//set height and width of canvas to browser window
var dummyCanvas = document.createElement('canvas');
var dummyctx = dummyCanvas.getContext('2d');
dummyCanvas.width = canvas.width;
dummyCanvas.height = canvas.height;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//draw some stuff on normal canvas
dummyCtx.clearRect(0, 0, canvas.width, canvas.height);
//draw a polygon on buffer canvas
dummyctx.globalCompositeOperation = 'source-in';
//draw another polygon on buffer canvas
ctx.drawImage(dummyctx.canvas, 0, 0);
//draw some more stuff on normal canvas
}
Is this memory problem just a bug in Firefox? Am I doing something wrong? Are there any workarounds?
Thank you so much for any help!
I notixed that images are somehow piled on each other in a canvas, when I dra more than one. Maybe it would help clearing te canvas, before draing to it again:
context.clearRect(0, 0, canvas.width, canvas.height);
var w = canvas.width;
canvas.width = 1;
canvas.width = w;
I took this from a image resize that I dod not so long ago: http://boxed.hu/articles/html5-client-side-image-resize/
But, this is only a tip - so let me know how it worked.
I had a memory leak problem with the jquery.rotate plugin increasing the memory use on IE and found that although drawing takes up memory, the problem was when the original image was replaced by the manipulated image. Apparently the images were just piling up in memory. The line was:
p.parentNode.replaceChild(canvas, p);
so I changed to use the jQuery function replaceWith() and the memory stopped stacking up after rotating several images:
$(p).replaceWith(canvas);
Looking at the replaceWith function, it actually removes the object (probably in the end uses removeChild and appendChild) and appends the new one to the DOM. My guess is that there's a difference on how the browsers implement replaceChild().

How do I clip a image obtained from the getImageData() function?

I'm trying to get the contents of a source canvas, clip it, and then draw it on another canvas. Even though my code works like a charm using a src PNG / new Image() combo, it does not when the source content comes from another canvas.
the code is:
var imgData = src_ctx.getImageData(x, y, w, h);
dest_ctx.putImageData(imgData, x, y+h);
ctx.beginPath(); // Filled triangle
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x2,0);
ctx.lineTo(x1,0);
ctx.clip();
After defining the clipping region, draw the source canvas using drawImage, instead of setting the imagedata.
dest_ctx.beginPath(); // Filled triangle
dest_ctx.moveTo(x1,y1);
dest_ctx.lineTo(x2,y2);
dest_ctx.lineTo(x2,0);
dest_ctx.lineTo(x1,0);
dest_ctx.clip();
// You can control wich region to draw using all the arguments
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
dest_ctx.drawImage (srcCanvas, x, y);
getImageData is an almost useless function unless you know what you're doing (ie. checking for hit detection, filtering pixels) but even then it is painfully slow.
I created a JSfiddle example for you fiddle around with (see what I did there!)
The heart of the code is as follows:
1 canvas = document.getElementById('canvas');
2 ctx = canvas.getContext("2d");
3 _canvas=document.createElement('canvas');
4 _ctx = _canvas.getContext("2d");
5 _canvas.width = 200;
6 _canvas.height = 200;
7
8 _ctx.beginPath();
9 _ctx.arc(100, 100, 100,0,Math.PI*2,true);
10 _ctx.clip();
11 _ctx.drawImage(img1, 0, 0);
12
13 ctx.drawImage(_canvas, 1.25 * i * _canvas.width, 500);
Essentially what you are doing is clipping to a cache canvas (_canvas, lines 10 and 11) and drawing that to the main canvas (canvas, line 13).
Note: Ideally you would translate your image so it would be in the center of the clip, but I still can not get my head around translations, especially when coupled with other transformations such as clips.

HTML Canvas: draw image without anti-aliasing

I want to do pixel-true rendering of some images on my Canvas. Right now, I obtain the images through Javascript, so my images are HTMLImageElement instances. I can draw these on the Canvas' rendering context with drawImage. However, this performs anti-aliasing on the image, which I don't want.
There appears to be a lower-level image manipulation method named putImageData, operating on ImageData objects. Does this method perform any anti-aliasing? If not, it's a fine candidate for what I'm looking for, but I haven't found out how I can convert or blit an HTMLImageElement to an ImageData instance.
Any advice would be welcome!
Edit: my original problem was solved, I accidentally had a coordinate that was fractional, which forces anti-aliasing. The conversion-to-image-data question still stands though.
The only way to convert an image into an ImageData object is to draw it to a canvas first, so you'll need to create a temporary canvas, draw the image on it, and get the image data from there.
function imageToImageData(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
return ctx.getImageData(0, 0, canvas.width, canvas.height);
}
Note though, that the same-origin policy prevents you from calling getImageData if you draw an image from a different domain to the canvas, so this will only work on images from the same domain as the document. If you need to draw images from other domains, your only option is to call drawImage on the context for you main canvas directly, making sure there are no transformations that will affect the accuracy.

Categories

Resources