I am working on fabric js project where I want user to be able to work on front and back side. Up till now we were using one canvas and then saving the json whenever a user switched sides. We would then re-render the json onto the canvas. We also save canvas image at this point in time.
Now,I am thinking of using two canvases and hiding one when the user switches sides. No re-rendering and saving image until user saves his work. It would be easier to manage the code this way, I am just not sure if it would be better performance wise as well?
Related
I am making a whiteboard based on the html5 canvas and have added many features like pencil, eraser, upload image, upload pdf and so on. Could anyone help me with how to have multiple canvas which can be accessed by the previous and next buttons. I also need an add button for addition of a canvas.I have already built the buttons in html and css and need help in the javascript.
This is a picture of the next and previous whiteboard buttons; and here id a picture of the add and previous whiteboard buttons. When the page is in the last whiteboard the add icon should be shown. I think there should also be a whiteboard limit which would help conserve the browser memory.
instead of adding multiple canvas you could use only on canvas,
on add canvas button , save this state of canvas and clear it
on pressing previous save this state of canvas and load previous state( and same for next)
in this way you won't have to worry about creating too many canvas and run into memory leak problem also
so basically you will have one canvas and array of state which you will load based on the number
I have a website which creates complex svgs based on input parameters. To store certain input parameters I want to save the chosen parameters along with a thumbnail to the server. I don't want to create the thumbnail on the server as the svgs can become quite big (up to 20MB, compressed still >2MB) and i dont want to send that much data to the server.
When i create the thumbnail on the client side via a canvas the UI becomes unresponsive for a couple of seconds. I tried to use Webworker yet it seems there is no way to draw the svg on the canvas in the worker. I don't need a high quality thumbnail so I hope there is another way of creating a thumbnail of the svg on the client which is faster than going over a canvas.
I think the best approach may be to create an svg root element that represents all thumbnails( for instance, its only element could be just the text "SVG"). Then include all the parameters, as attributes, at its svg root, for whichever full sized svg it represents, and send it to the server.
I've been working on building a tile-based display grid for canvas. This is what I have so far: http://jsfiddle.net/dDmTf/7/
Some problems I'm having, and can't quite grasp are:
The initial load time is ridiculous... I don't understand what I'm doing wrong - fixed, found out I was rendering ^32 more than I was supposed to
The hover effect, which "should" just highlight the border of the tile, erases it, and I have no way of recovering the previous tile without re-rendering the entire canvas.
How do I use tilesheets, providing me a single image instead of a bunch of small ones
Resizing the window (which resizes the canvas) also erases the canvas. Do I need to re-render? Or can I maintain state of various things when width/height is changed - added an onresize callback, which re-renders the map. Might not be the best way though?
Multiple layers? How would I go about allowing transparency .png files overlaying each-other
Those are the main problems I'm stuck on right now, and any guidance would be majorly appreciated.
Also, if you have any pointers for my javascript, feel free! I'm learning it more as I go, and I'm sure I'm doing a lot of things wrong.
Edit
As an FYI, I just copy-pasted the sprite map currently being shown on the jsfiddle. It's not the one I'm planning to use, but it was easier than uploading one. I plan to maintain a 32x32 grid instead of (what appears to be) a 16x16 grid from that tilesheet
Edit
I've got the a 32x32 tilesheet displaying on there now, but the hover effect is still breaking it, and I'm not sure how to "know" what the old value was.
The problem is that you are not redrawing your tiles after 'mouseout'.
You either need to redraw the single tile after you move out of it, but this can get tricky as things get more complicated or better yet on mouse move do the following.
Clear the canvas
draw the grid
draw your tiles
then do the highlighting/clearing that cell.
If you end up having any sort of animation this is the process that will be used anyhow otherwise as something moves from one tile to another it will leave ghost images behind.
If we use multiple <canvas> on a single html page does it hamper the performance of the application that is being developed and does the code get very bulky and require more time to load the page?
Sometimes multiple canvases results in better performance. It's best to test if you can afford the time.
Say you are making a program that has items on the screen and allows the user to draw a selection box.
With one canvas, to draw the selection box you'd have to redraw all of the elements over and over to update the selection box that the user sees since they are all on the same canvas.
Or, you can have two canvases, one with the objects and then another one in front for things like "tools" (like the selection box graphics). Here two canvases may be more efficient.
Other times you may want to have a background that changes very rarely and foreground objects that change all the time. Instead of redrawing all of them at 60 frames per second, you make a background canvas and foreground canvas, and only have the foreground's objects redraw at the fast speed. Here two canvases ought to be more efficient than one, but it may be more optimal to "cache" that background canvas as an image and drawing the image first each frame.
I've used dozens of canvases on the same page display different graphs using a javascript graphing library. The graphs are quite fast, it's gathering the data for them that's a bit slow in our case.
If you want you can wait to do all your drawing until the rest of the page loads by kicking it off from the onLoad function.
Also, HTML5Rocks says it is a best approach.
According to Mark Pilgrim, it's a good idea to use multiple canvases.
See This Link
Using multiple canvases can simplify things on your end, by isolating regions of the screen to update and isolating input events. If your page is well-suited for dividing-up regions of the screen, I say go for it.
A single instance runs smoothly, more does not affect rendering on page. Data is the factor of slowing canvas down. In order to increase page loading time, you can simply call canvas rendering methods after page loading.
So I built this real-time drawing app with node.js, socket.io, and html5 canvas. Every pixel that the mouse is moved while clicked is tracked and broadcast (to display drawing input on other computers).
I know it is possible to save an image of the canvas but this canvas is very large (10000x10000+ pixels). Right now, when the page is refreshed all the drawings are gone (as it was just send over a socket, nothing saved).
I would like to save all the canvas data to a db and then somehow rewrite it when the page is loaded again, but it is simply too much. How would you go about doing this??
You can track the clicks and mouse moves that made the canvas look that way while you're sending them over the socket, and simulate them to rebuild the image.