I have a graphing application that overlays several canvases. I'd like the user to be able to right-click and save image. When the user does this now, it only saves the top layer canvas (correctly), but misses the lower layers. What might a strategy be to composite the multiple canvases when the right-click occurs?
Thank you,
PT
The strategy would be, to draw all the lower canvases on the top canvas, when a user right clicks on the top canvas to save image.
You could use drawImage() method, to draw a certain canvas on another canvas.
Here is a quick example, showing how this could be done ...
var lowerCTX = document.querySelector('#lowerCanvas').getContext('2d');
var upperCTX = document.querySelector('#upperCanvas').getContext('2d');
//draw rect on lower canvas
lowerCTX.fillStyle = 'green';
lowerCTX.fillRect(20, 20, 50, 50);
//draw rect on upper canvas
upperCTX.fillStyle = 'red';
upperCTX.fillRect(130, 130, 50, 50);
//add right click event to upper canvas
upperCTX.canvas.onmousedown = function(e) {
if (e.which === 3) {
//draw lower canvas on upper canvas
upperCTX.drawImage(lowerCTX.canvas, 0, 0);
}
};
body{margin:10px 0 0 0;overflow:hidden}#canvas_wrapper{display: inline-flex}canvas{border: 1px solid #ccc}#upperCanvas{margin-left: -202px}
<div id="canvas_wrapper">
<canvas id="lowerCanvas" width="200" height="200"></canvas>
<canvas id="upperCanvas" width="200" height="200"></canvas>
</div>
Related
We are using a canvas to draw an image, and require that the image is smoothed.
so we use context.imageSmoothingEnabled in the 2d Canvas context.
We notice that if we use a jpg and smoothing is true, then the image fails to scale correctly on some machines (mainly windows 64bit).
In addition, if smoothingQuality is set to 'low' (rather than medium or high) then it works, but of course, who wants low.
If you modify the code to point to a PNG file, it seems to work ok.
Here is the JS Code
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.imageSmoothingQuality = "medium";
// set to true and the image fails to scale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, 0, 0, 50, 50);
}
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";
body {
background: #CEF;
}
<canvas id="c" width="800" height="600"></canvas>
Thanks in advance.
I have tried it on a Win10 64bit, Win10 32Bit (64bitCPU) and Win10 32bit on Chrome Beta, & Canary
Can not repeat problems you mention.
The image format (jpeg,png) will not effect the result of any of the smoothing or quality settings (apart from source image quality).
What can make a difference, especially at small scales is the ratio of the scaled down image to the original. Ratios like 1/2 1/4 1/8th will produce far better results than 1/3 2/9 3/19th. When comparing images of different sizes you should compare at same scale ratio rather than same size (if original have different sizes)
Below I used your code and the image you linked to to draw the image at the same size you had. Along the top from left to right is smoothing true from quality high on left to low on right.
The second row is same but smoothing turned off.
Below that is the same but zoomed via copy of canvas and no smoothing to show more details of the differences the setting make (if any).
If as your question outlines this was reproducible it would be a major issue for chrome and would be quickly fixed. I would say it is something very specific, maybe all the graphics cards are the same type and there is a driver issue, or images are cached and some old bad version is appearing.
If you want more help the best you could do is provide some screen shots of the problems, showing the problem and the desired result. That way we can at least narrow it down somewhat.
var ctx = c.getContext('2d');
var img = new Image;
img.src = "http://i.imgur.com/gwlPu.jpg";
img.onload = function () {
ctx.imageSmoothingQuality = "high";
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, 0, 0,50,50);
ctx.imageSmoothingQuality = "medium";
ctx.drawImage(img, 60, 0,50,50);
ctx.imageSmoothingQuality = "low";
ctx.drawImage(img, 120, 0,50,50);
ctx.imageSmoothingQuality = "high";
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 0, 60,50,50);
ctx.imageSmoothingQuality = "medium";
ctx.drawImage(img, 60, 60,50,50);
ctx.imageSmoothingQuality = "low";
ctx.drawImage(img, 120, 60,50,50);
ctx.imageSmoothingQuality = "low"; // turn off all filtering
ctx.imageSmoothingEnabled = false;
ctx.drawImage(c,0,0,170,110,0,120,680,440)
}
body {
background: #CEF;
}
<canvas id="c" width="800" height="600"></canvas>
Following content edited in by OP user2739963
Here is a screen shot of this not working on a machine (We have many of these).
Iam searching for a solution, in html5-canvas how to clear the scale function?
If I scaled a shape, for next shape it should not scale or scale less
thank you
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// first draw
ctx.strokeRect(5,5,25,15);
//scale
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
// how to clear scale this ? It should draw like first
ctx.scale(-1,-1); // this is not working
ctx.strokeRect(5,5,25,15);
</script>
</body>
</html>
Since you scaled by 2, you can un-scale by 1/2
// first draw
ctx.strokeRect(5,5,25,15);
//scale
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
// un-scale
ctx.scale(.5,.5); // unscale by 1/2
ctx.strokeRect(5,5,25,15);
Another example, if you had scaled by 3 you would unscale by 1/3
// scale
ctx.scale(3,3);
// unscale
ctx.scale(1/3,1/3);
I think the most convenient solution for your problem is to save the context and then restore it after you are done drawing the stuff you want to be scaled.
// Draw the first rect with size 20x20
ctx.strokeRect(50,75,20,20);
// Save context
ctx.save();
// Double the scale
ctx.scale(2, 2);
// Draw the second rect with the same size
ctx.strokeRect(65,35,20,20);
// Restore context
ctx.restore();
// Draw the last rect, still with size 20x20
ctx.strokeRect(220,75,20,20);
Example: http://jsfiddle.net/8tXVL/
I'm trying to use a canvas image as background here: http://www.cphrecmedia.dk/musikdk/stage/prelisten.php
The code is as below:
window.onload=function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
stackBoxBlurImage('coverbgblur', 'canvas', 19, false, 2);
}
Beside the layout stuff that needs to be fixed, I need to darken the image a little bit, so the text will always be visible, also if I use a white album-cover. Can I somehow in the code above add a line or 2 that will darken the image? I know I can use CSS3, but its seems unsmart to create an extra layer of processing instead of doing it right the first time.
I'm quite new with canvas, so every kind of help is hugely appreciated!
You can make the canvas appear darker by drawing a semi-transparent dark rectangle over the image when after you draw the image
context.fillStyle = "rgba(0, 0, 0, 0.4)";
context.fillRect(0, 0, 700, 500);
Here is an example jsFiddle
You may also be able to use context.globalAlpha or context.globalCompositeOperation = "lighter"; as described in this SO post
Is it possible to use clearRect to delete part of a png image drawn to the canvas using drawImage?
I'm trying something like this and its not working:
<canvas id="canvas"></canvas>
<img id="pngimg" src="" alt="" />
[...]
canvas = document.getElementById("canvas");
pngimg = document.getElementById("pngimg");
[...]
pngimg.src = canvas.toDataURL();
context.drawImage(pngimg, 0, 0, canvas.width, canvas.height);
[...]
Then using clearRect to erase with the mouse. The erase works on the strokes that were added to the canvas using drawLine but not for images using drawImage. It must be clearRect instead of drawing a solid color because the background isn't solid. Is it possible to do this?
Where are you loading the image from?
you can't use canvas.toDataURL() if the image on the canvas originated from a different domain. see here: Why does canvas.toDataURL() throw a security exception?
In a same domain situation this should work:
Original Image: <img id="pngimg" src="http://www.domain.com/image.png" /><br/>
Canvas With Clear:
<canvas width="160" height="80" id="canvas"></canvas><br/>
Altered Image:
<img id="newImg" src="" />
and the script:
canvas = document.getElementById("canvas");
pngimg = document.getElementById("pngimg");
newImg = document.getElementById("newImg");
var context = canvas.getContext("2d");
context.drawImage(pngimg, 0, 0, canvas.width, canvas.height);
context.clearRect(125,0,35,25);
newImg.src = canvas.toDataURL("image/png");
As you haven't shared complete code I am not sure, but from the description I doubt that it is the same issue I came across earlier today. Please visit this thread.
On a canvas, difference between drawImage with png vs create a drawing using strokes?
Without any extension library, is it possible to have multiple layers in the same canvas element?
So if I do a clearRect on the top layer, it will not erase the bottom one?
Thanks.
No, however, you could layer multiple <canvas> elements on top of each other and accomplish something similar.
<div style="position: relative;">
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
Draw your first layer on the layer1 canvas, and the second layer on the layer2 canvas. Then when you clearRect on the top layer, whatever's on the lower canvas will show through.
Related to this:
If you have something on your canvas and you want to draw something at the back of it - you can do it by changing the context.globalCompositeOperation setting to 'destination-over' - and then return it to 'source-over' when you're done.
var context = document.getElementById('cvs').getContext('2d');
// Draw a red square
context.fillStyle = 'red';
context.fillRect(50,50,100,100);
// Change the globalCompositeOperation to destination-over so that anything
// that is drawn on to the canvas from this point on is drawn at the back
// of what's already on the canvas
context.globalCompositeOperation = 'destination-over';
// Draw a big yellow rectangle
context.fillStyle = 'yellow';
context.fillRect(0,0,600,250);
// Now return the globalCompositeOperation to source-over and draw a
// blue rectangle
context.globalCompositeOperation = 'source-over';
// Draw a blue rectangle
context.fillStyle = 'blue';
context.fillRect(75,75,100,100);
<canvas id="cvs" />
You can create multiple canvas elements without appending them into document. These will be your layers:
Then do whatever you want with them and at the end just render their content in proper order at destination canvas using drawImage on context.
Example:
/* using canvas from DOM */
var domCanvas = document.getElementById('some-canvas');
var domContext = domCanvas.getContext('2d');
domContext.fillRect(50,50,150,50);
/* virtual canvase 1 - not appended to the DOM */
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50,50,150,150);
/* virtual canvase 2 - not appended to the DOM */
var canvas2 = document.createElement('canvas')
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = 'yellow';
ctx2.fillRect(50,50,100,50)
/* render virtual canvases on DOM canvas */
domContext.drawImage(canvas, 0, 0, 200, 200);
domContext.drawImage(canvas2, 0, 0, 200, 200);
And here is some codepen: https://codepen.io/anon/pen/mQWMMW
I was having this same problem too, I while multiple canvas elements with position:absolute does the job, if you want to save the output into an image, that's not going to work.
So I went ahead and did a simple layering "system" to code as if each layer had its own code, but it all gets rendered into the same element.
https://github.com/federicojacobi/layeredCanvas
I intend to add extra capabilities, but for now it will do.
You can do multiple functions and call them in order to "fake" layers.
You might also checkout http://www.concretejs.com which is a modern, lightweight, Html5 canvas framework that enables hit detection, layering, and lots of other peripheral things. You can do things like this:
var wrapper = new Concrete.Wrapper({
width: 500,
height: 300,
container: el
});
var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();
wrapper.add(layer1).add(layer2);
// draw stuff
layer1.sceneCanvas.context.fillStyle = 'red';
layer1.sceneCanvas.context.fillRect(0, 0, 100, 100);
// reorder layers
layer1.moveUp();
// destroy a layer
layer1.destroy();
but layer 02, will cover all drawings in layer 01. I used this to show drawing in both layers. use (background-color: transparent;) in style.
<div style="position: relative;">
<canvas id="lay01" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 0; background-color: transparent;">
</canvas>
<canvas id="lay02" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 1; background-color: transparent;">
</canvas>
</div>
I understand that the Q does not want to use a library, but I will offer this for others coming from Google searches. #EricRowell mentioned a good plugin, but, there is also another plugin you can try, html2canvas.
In our case we are using layered transparent PNG's with z-index as a "product builder" widget. Html2canvas worked brilliantly to boil the stack down without pushing images, nor using complexities, workarounds, and the "non-responsive" canvas itself. We were not able to do this smoothly/sane with the vanilla canvas+JS.
First use z-index on absolute divs to generate layered content within a relative positioned wrapper. Then pipe the wrapper through html2canvas to get a rendered canvas, which you may leave as-is, or output as an image so that a client may save it.