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();
Related
I have a component that is consuming fabricjs canvas content on the event "after:render", this works well with all the functions like adding objects, moving them etc.
However when it come to free drawing, the "after:render" event only fire once the drawing is completed, ie on mouse up event. I tried to read the canvas data while the mouse is drawing but with no luck, apparently the contents is not yet rendered onto the canvas during drawing.
I understand that from this PR https://github.com/fabricjs/fabric.js/pull/2895 that the free drawing draws on this contextTop element, my question is can I read the data from it? Or is there anyway to force fabric to render free drawing contents before mouse up? I have tried renderAll() with little luck.
Thanks!
I think you can do the following:
var points = canvas.freeDrawingBrush._points;
var pathData = canvas.freeDrawingBrush.prototype.convertPointsToSVGPath.call(canvas.freeDrawingBrush, points);
This should give you the actual path data string to create a path in the system you prefer.
I am currently working on a game (Purely a hobby) found at http://game.mersholm.dk
I got most things working out great (transformation, selection, movement, objects etc) But theres one nut of which i just cannot crack.
I am trying to add an isometric building using drawimage(experimenting). Ofcourse the image also undergoes a transformation due to the transformation matrix defined. This just makes the image twirl and rotate.
If i reset the matrix, draw the image and sets the matrix again it will break my screen to world cordinate calculations.
How would i go around adding isometric graphics to the world without twirling them with the matrix?
best regards.
Jonas
The right way to go when drawing an image with transform is this one :
save the context.
reset the context's transform.
translate to the screen point where you will start drawing the image.
apply the transform required for the image : rotate/scale/skew.
draw the image at (0,0).
restore the context.
In case you are confident with the previous state of the context, do not reset it. But, then, if you don't reset the context -which is faster- just be sure to use world OR screen coordinates according to the current scale/transform.
I am currently learning to use canvas, and do not understand the difference between these two functions. From what I have read, the translate method 'moves the canvas'? Can someone explain this?
Edit: Is moveTo only used within the context of a path?
To be a little more specific than Kolink, since I think the explanation is a little muddy;
-The coordinate you pass moveTo is the starting point of a new line (or shape); As if picking up your pen off the paper and setting it in a new location (the new coordinates).
-The function of lineTo is what "move(s) the pen across the paper to draw a line" (to a new coordinate you've given it, since you need two points to draw a line, obviously)
-You can place multiple lineTo calls one after another and it will use the last point you ended on, to continue the line, like so:
ctx.moveTo(100,50);
ctx.lineTo(25,175);
ctx.lineTo(175,175);
ctx.lineTo(100,50);
ctx.stroke();
here's a simple fiddle showing the outcome: http://jsfiddle.net/fbZKu/
(you can even "fill" these shapes you make with ctx.fill()!)
-The use of translate is to move the canvas' (0,0) coordinate (upper left corner) to the new coordinate.
I hope that clears things up a bit more! Happy coding! :)
Imagine you are drawing on graph paper.
moveTo means you take your pen and move it across the paper to draw a line.
translate means you shift the position of the paper on the table.
They could not be more different functions.
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 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)