I'm creating an animated diagram and I'm trying to use a native canvas element as well as kineticjs for the animations. I know that kinetic creates a hidden canvas element, but my question is. Is it possible to stop kinetic from doing this and implement the kinetic framework into a native canvas element?
Every KineticJS layer is a visible drawing canvas plus an invisible canvas used for Kinetic's internal purposes.
The drawing canvas is a "native canvas element".
Normally Kinetic does all the drawing for you, but...
You can use Kinetic.Shape objects to issue native drawing commands directly to the html canvas element.
The Kinetic.Shape object gives you a canvas context that you can use to create your custom diagram.
This context is actually a Kinetic wrapper around the actual context. If there is a command that the wrapper hasn't implemented yet you can get the real canvas context like this:
var myRealCanvasContext=this.getContext()._context;
Related
i'm a beginner in Javascript so please bear with me.
Basically I'm making a sandbox drawing facility for a website using Javascript. And this is done using the canvas. What I need to do is to be able to resize the canvas dynamically but at the same time keep everything on the canvas to scale.
I don't think this question has been asked before. It seems trivial but I currently have all my objects on the canvas defined in absolute coordinates. I also have mouse events to use to draw things. And when I want to enlarge the canvas (by doubling the size say). All the objects inside won't be enlarged properly to scale and the mouse coordinate system would be messed up too.
Only solution i can think of is add a scale factor to ALL my drawing parts, but this is very tricky with a lot of code. Is there a better way?
If you don't mind jaggies on your double-sized canvas drawings then you can simply use CSS to double-size your canvas. Then divide every incoming mouseEvent coordinate by 2.
If you don't want jaggies on your double-sized canvas then:
Double-size the canvas element: canvas.width*=2 and canvas.height*=2 This automatically erases all canvas content.
Scale up the canvas: context.scale(2,2)
Redraw all your drawing parts using the unchanged original coordinates. A happy note: you do not have to scale any of your drawing coordinates -- context.scale automatically does that for you.
Divide every incoming mouseEvent coordinate by 2.
i find a simple canvas flag, but I have the question of how can I make it with EaselJS?
because in EaselJS documentation don't says about, make another canvas "without DOM interaction", and change pixel positions, but in EaselJS documentation I can't find how make it, and I have some questions:
1 Can i merge EaselJS code with normal Canvas code? Explanation, If I draw an animated North Korean flag star with some textures, can I make the static draw with EaselJS, and animate it with naked canvas code?
2 is possible make it with other library?, such as LimeJS or other libraries
3 I must use a WEBGL Library?, such as Three.js?
KineticJS takes hold of the canvases and controls their size and position.
I would like to have KineticJS render a layer to an offscreen 5000x2500 canvas, it seems a little complicated and "hacky" to get something like this done within KineticJS.
The only viable solution I can think of is to create a separate KineticJS Stage object and hide the container.
Any ideas, what the best method would be? Thanks!
Use a KineticJS custom shape object as a viewport into an offscreen html5 canvas element
The Kinetic.Shape object gives you access to many of the canvas and context properties/methods necessary to interface with a regular offscreen canvas element.
Is it possible to export Kinetic JS object to SVG?
Or workaround is to convert Kintetic JS's canvas to SVG.
EDIT:
The best is to use fabricJS since it supports canvas to SVG rendering while working with fabric objects.
I accepted Phrogz's answer since it also does conversion canvas to svg without using some other library for drawing on canvas.
EDIT 2: OK, i messed up, Phrogz's library is wrapper around canvas element so you use it's methods to draw on canvas (I thought that it just 'listens' on canvas and creates SVG paths). So the best solution is fabricJS definitely.
The best solution is to use Fabric.js!
I've created an alpha version of a library that allows you to extend an HTML5 Canvas Context such that it tracks all vector drawing commands and stores them as an array SVG elements in a ctx.svgObjects property of the context.
You can see the library in action here: http://phrogz.net/svg/HTML5CanvasRecordsSVG.html
The demo turns on recording, draws a few shapes to the HTML5 Canvas, and then appends the 'recorded' SVG objects to an SVG container next door.
In general the library:
Keeps track of the current context transformation via an SVGMatrix object. (This is because the HTML5 Context api lets you set the current transform to a matrix, but does not let you get the current matrix.) It does this by intercepting calls like translate() and rotate() and updating the matrix accordingly.
Intercepts beginPath() and creates a new SVG Path element, and then intercepts further commands like moveTo() and lineTo() in order to add the equivalent path commands to the SVG path.
Note: not all path commands are supported or tested in the library at the time of this writing.
Intercepts fill() and stroke() to add a copy of the current SVG <path> to the svgObjects array, setting the current transformation matrix, fill and stroke styles.
Note: not all stroke styles (lineCap, lineJoin, miterLimit) are supported as of this writing.
Note: calling fill() followed by stroke() creates two separate SVG elements; there is no optimization to differentiate this specific case from stroke/fill, or changing the transform or path between calls.
Intercepts fillRect() and strokeRect() to create an SVG <rect> element.
More work could be done on this library to flesh out all the commands (not just path commands, but also things like fillText()). But it's not something that I personally need, so I'm not inclined to spend hours carrying it over the finish line.
basicly you can convert the canvas to base64 png and then put it on svg
maybe this could help you
http://svgkit.sourceforge.net/tests/canvas_tests.html
I'm currently implementing a HTML canvas based webapp that features panning. Is there a way to use an auxiliary buffer to hold the presently visible area so when I pan I don't have to redraw the whole canvas and only have to draw the newly visible areas?
See my previous response to a related question: What is the fastest way to move a rectangular (pixel) region inside a HTML5 canvas element
Just draw the entire canvas in a div that has overflow:hidden and implement panning as re-positioning the top and left of the canvas within that div. It is much faster. And don't worry about drawing canvases tens of thousands of pixels wide/tall, I've successfully used this on very-very large and complex HTML and SVG elements.
Take a look at the pixel manipulation API.
http://dev.w3.org/html5/2dcontext/#pixel-manipulation