I want to know how I can translate an entire scene already drawn on an html5 canvas, for example 5 pixels down. I know the translate method just translates the canvas' coordinate system, but I want to know if there is a way to translate the entire scene that is already drawn onto the canvas.
You can apply the transforms and call drawImage passing in the canvas itself.
ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();
When doing that, the original contents will still be below.
Depending on the effect you're trying to accomplish, setting the globalCompositeOperation may help you with that.
But it's likely you'll need to use drawImage to first copy to a second canvas, clear the current, apply the transform and draw from the copy.
Not unless you take a screenshot and translate that.
However, just inserting
context.translate(0, 5)// or your values
right before your drawing code should do the trick.
Reference: MDN Canvas Tutorial (Transformations)
Related
Is it possible to do something like this
var image = new Image();
image.src = 'img.svg';
context.drawImage(image, x, y); // context is an instance of CanvasRenderingContext2D
with a SVG image? Actually this code works, but I think the image is converted to .jpg or similar, because if I try to zoom the browser page the image becomes coarse.
Clarification : The image should be re-drawn many times in the canvas context (i.e. for movements), so suggestions like "use this library" should consider this fact.
EDIT
From previous discussions, the issue seems to be due to canvas properties (canvas is not browser-zoomable) and not due to incorrect loading. Can I get and modify (eventually) this property of canvas to realize my purpose? I have to draw necessarily on canvas, no other options unfortunately.
Translate rendered svg according to the wanted zoom level.
How to detect page zoom level in all modern browsers?
explains browser-zoom level detection. And you can use fabricjs for canvas manipulation (http://fabricjs.com/).
Take a look at this example:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// First rectangle created
ctx.fillRect(20,20,150,100);
// Second rectangle created
ctx.fillRect(20,150,150,100);
// Third rectangle created
ctx.fillRect(20,300,150,100);
I created three rectangles here. After creating third rectangle I want to rotate first rectangle. How do i get reference of first rectangle now?
A canvas is just a dumb grid of pixels. It doesn't understand what shapes have been drawn on it. Your code (or a library that your code uses) must keep track of the shapes that you've drawn.
Instead, it sounds like you want a library to create a scene graph, like EaselJS, Paper.js, or KineticJS. These libraries will maintain a data structure that tracks what shapes have been drawn on the canvas, and they will then redraw them when you want to manipulate those shapes.
You don't "get the reference" of a rectangle or something with canvas. All you have is a canvas with a context. On which you can draw. Period.
If you want to move the first rectangle, then clear it (using clearRect) and redraw the new one.
Canvas itself is just pixels. It knows how to draw rectangles, but doesn't keep them layered.
To quote Simon Sarris:
HTML5 Canvas is simply a drawing surface for a bit map. You set up a
draw (Say with a color and line thickness) , draw that thing, and then
the Canvas has no knowledge of that thing: It doesn't know where it is
or what it is, it's just pixels. If you want to draw rectangles and
have them move around or be selectable then you have to code all of
that from scratch, including the code to remember that you drew them.
The only exception is the isPointInPath method, but it has limitations.
However, there are some libraries that provide object-oriented interface for Canvas. Like Fabric.js or KineticJS. They remember what you draw as objects (rectangles, circles and so on) and can layer them one over another, move around and add mouse/touch events. Much like DOM.
Drawing functions like fillRect() does not return anything (returns void).
Meaning it simply renders the pixels, it does not create a rectangle object and return it. You'll need to store the rectangle coordinates yourself.
I'm creating game with the world bigger than screen. So i need to move Debug Draw according to visualization. In flash port to archive this issue we are usually move DisplayObject that uses as target of Debug Draw but in javascript port of Box2D Debug Draw lacks of this possibilities? Or i miss something?
I have used box2dweb javascript port of Box2DFlash 2.1a https://code.google.com/p/box2dweb/.
just use functions of context 2d of canvas:
context.translate(canvasOffset.x, canvasOffset.y);
context.scale(scale,scale);
If you want to translate your context from absolute values (i.e. values from the original position and not from the last frame position), you will need to save and restore the context, so you have the same origin for translations.
You may also need clearRect to clear the area that will be drawn.
context.save();
context.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
context.translate(canvasOffset.x, canvasOffset.y);
world.DrawDebugData();
context.restore();
Take a look at this example:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// First rectangle created
ctx.fillRect(20,20,150,100);
// Second rectangle created
ctx.fillRect(20,150,150,100);
// Third rectangle created
ctx.fillRect(20,300,150,100);
I created three rectangles here. After creating third rectangle I want to rotate first rectangle. How do i get reference of first rectangle now?
A canvas is just a dumb grid of pixels. It doesn't understand what shapes have been drawn on it. Your code (or a library that your code uses) must keep track of the shapes that you've drawn.
Instead, it sounds like you want a library to create a scene graph, like EaselJS, Paper.js, or KineticJS. These libraries will maintain a data structure that tracks what shapes have been drawn on the canvas, and they will then redraw them when you want to manipulate those shapes.
You don't "get the reference" of a rectangle or something with canvas. All you have is a canvas with a context. On which you can draw. Period.
If you want to move the first rectangle, then clear it (using clearRect) and redraw the new one.
Canvas itself is just pixels. It knows how to draw rectangles, but doesn't keep them layered.
To quote Simon Sarris:
HTML5 Canvas is simply a drawing surface for a bit map. You set up a
draw (Say with a color and line thickness) , draw that thing, and then
the Canvas has no knowledge of that thing: It doesn't know where it is
or what it is, it's just pixels. If you want to draw rectangles and
have them move around or be selectable then you have to code all of
that from scratch, including the code to remember that you drew them.
The only exception is the isPointInPath method, but it has limitations.
However, there are some libraries that provide object-oriented interface for Canvas. Like Fabric.js or KineticJS. They remember what you draw as objects (rectangles, circles and so on) and can layer them one over another, move around and add mouse/touch events. Much like DOM.
Drawing functions like fillRect() does not return anything (returns void).
Meaning it simply renders the pixels, it does not create a rectangle object and return it. You'll need to store the rectangle coordinates yourself.
I'm developing a drawing application with canvas.
I would like to implement an erase functionality, but not a simple erase which is a simple white pen, a real rubber.
In fact, I have a transparent canvas added over the application, and I would like, when I draw, I can erase what I drawn, i.e put opacity to 0 !
I already search on Google & stackoverflow and I find that :
Code : JavaScript - Sélectionner
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,0)";
But it don't work ... Too, I try different modes of globalCompositeOperation shown on MDN but there is no difference.
Help please.
It doesn't work because you draw a transparent line over what you are trying to erase... So it does nothing.
It is easy to erase when you have a white background, you just draw white over. But it is not what you want.
The trick here is to use clearRect which remove what is on the canvas, instead of drawing over other shapes.
context.clearRect(cursorX, cursorY, brushWidth, brushHeight);
It will appear as small squares but I can't see another way to do it, except maybe with pixel manipulation.