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/
Related
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>
Please notice that I have no background on mathematics or computer graphics.
I would like to know the best way to programmaticaly manipulate an hand-drawn line, if it is even possible.
The draw action must be done in a html page. (may be irrelevant)
methods I tough off:
Draw a line into a canvas (hand-drawn line with up and downs) -> convert to bitmap -> somewhow intepret line on bitmap and manipulate its form (is this possible?)
Instead of interpret from bitmap, at the drawing moment have a kind of button to toggle capture on/off and after capture, generate some kind of mathematical function wich I am able to manipulate and from it generate the new bitmap
Yes, you can.
It's not difficult, but there are lots of small coding aspects to learn.
If you’re in “drawing” mode, you would collect mousepoints that the user clicks and make a line from all those points.
If you’re in “editing” mode, you would let the user drag one of those collected points to a new coordinate and make a line from all the edited points.
Here’s starting code for you to look and learn from plus a Fiddle: http://jsfiddle.net/m1erickson/J5PrN/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth=3;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isDown=false;
var startX;
var startY;
var points=[];
var selected=-1;
var mode="draw";
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for(var i=1;i<points.length;i++){
ctx.lineTo(points[i].x,points[i].y);
}
ctx.stroke();
if(mode=="edit"){
for(var i=0;i<points.length;i++){
ctx.beginPath();
ctx.arc(points[i].x,points[i].y,10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
}
}
function handleMouseDown(e){
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
if(mode=="draw"){
points.push({x:startX,y:startY});
draw();
}else if(mode=="edit"){
for(var i=0;i<points.length;i++){
var pt=points[i];
var dx=startX-pt.x;
var dy=startY-pt.y;
if(dx*dx+dy*dy<100){
selected=i;
return;
}
}
}
}
function handleMouseUp(e){
selected=-1;
}
function handleMouseOut(e){
selected=-1;
}
function handleMouseMove(e){
if(selected<0){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
if(selected<0){return;}
var dx=mouseX-startX;
var dy=mouseY-startY;
startX=mouseX;
startY=mouseY;
var pt=points[selected];
points[selected]={x:pt.x+dx,y:pt.y+dy};
draw();
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
$("#draw").click(function(){
mode="draw";
draw();
$instructions.text("Click points to draw a line");
});
$("#edit").click(function(){
mode="edit";
draw();
$instructions.text("Drag points to move the line");
});
$instructions=$("#instructions");
}); // end $(function(){});
</script>
</head>
<body>
<button id="draw">Add to Line</button>
<button id="edit">Change Line</button><br>
<p id="instructions">Click points to draw a line</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I can't speak to HTML, but in most applications I have seen (such as this one), hand drawn lines are broken up into small straight segments. This is because the sensing system (touch or mouse) gives your application a (somewhat) continuous stream of points; it does not give the actual line. The individual segments are then used to do whatever the goal of the application is.
In the case of line drawing, as the line is drawn, the application takes the points and smooths them (cubic spline, least squares polynomial fit, b-spline, etc.) then draws the smoothed lines onto the screen in the color and style (pen, pencil, chalk, etc.). This gives the user immediate feedback about where their hand is moving, etc.
In the case of gestural control, some overlay line may be drawn to give the user feedback, but the segments are processed differently to determine the gesture (this can be very complex).
Having the lines cached as a series of gestures gives you options for undo/redo. You can also store the drawing as a series of gestures instead of a fixed bitmap.
Was this helpful?
I want to resize and slowly growing size canvas element (like a arc) on the mouseover event. How can I do this?
mouseover on the canvas itself? Just add an event listener and redraw the scene the way you want:
// Every time the mouse comes over the canvas the radius increases.
// you could even add a timer so that every time the mouse stays over
// the canvas the radius continues to increase constantly
can.addEventListener('mouseover', function(e) {
radius += 10;
ctx.clearRect(0,0,can.width, can.height);
ctx.beginPath();
ctx.arc(150, 150, radius, 0, Math.PI*.8, false);
ctx.stroke();
}, false);
http://jsfiddle.net/dAQdL/
mouseover an "object" drawn on the canvas? You're gonna have to add object persistence and detection to the canvas.
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.