How to have multiple HTML5 canvas with previous, next and add icon - javascript

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

Related

Change content/image when hovering an image with multiple parts

I'm trying to see if possible at all, to have the image attached change an image on the side when hovering over 1,2,3...
This means there are several parts changing the side image to another image each time. My biggest question is, is it possible to do this without cutting the image into multiple parts and keeping it as a single image with multiple hover points?
Yes it is. Very old style but you can create a so called areamap. Sample Page in German Use google chrome to translate the explanation.
But in your case its cheaper to create tabel and hover the cells ;) CSS background-image is your friend.

Is it possible to record a video of the contents of an HTML element?

So I want to use javascript and css to create an animated video of maps. I imagined to do some animations using leaflet etc and use some javascript to record a video of it.
However so far I found that video recording is only possible for the entire screen or a canvas according to MDN (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element) and Google documentation (https://developers.google.com/web/updates/2016/10/capture-stream)
I tried to render leaflet js onto a canvas, but I could not find any way to do so.
So is there a way to create an animated video using javascript? Either by rendering leaflet onto a canvas or by recording the content of a element?
You can use RecordRTC to record a canvas element.
If you already have a canvas that has animations in it, it is very simple to use RecordRTC to record that canvas element.
If you don't have a canvas element and you need to record an HTML element, you would first need to place a hidden canvas on the screen and draw on it your HTML content using window.requestAnimationFrame(). Then you can use RecordRTC to record that canvas element.
You can use RecordRTC's CanvasRecorder to record just the canvas.
But if you want to do other things like record the user's microphone or browser tab's audio alongside your recording your canvas, you can canvas.captureStream() and use the RecordRTC's MediaStreamRecorder to record.
In both the aforementioned cases, you will get a video file as the result.
A full example demo can be found here -> https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/Canvas-Animation-Recording-Plus-Microphone.html
The source code for that demo can be found here -> https://github.com/muaz-khan/RecordRTC/blob/master/Canvas-Recording/Canvas-Animation-Recording-Plus-Microphone.html
All credits go to Muaz Khan for maintaining such an awesome project alongside many other equally awesome webRTC projects.
NOTE: Rendering HTML element to canvas can be CPU intensive.

Single image different background

I don't really know what im searching for even after googling all sorts and wondered if someone could put me in the right direction.
Lets base this example on a car frame.
I would like to have one image of a car frame which allows to have multiple colours (Hex), so when a user selects black, the main car colour is black but the shape/frame of the car remains with the same image, selecting red would change the colour but would keep the same frame image.
The reason why i would like to have one image is, because there could be 50-60 cars all with around 20-30 different colours. So uploading that many images would consume a lot of disk space over time.
Any components/frameworks i could use with an ASP net project?
Either client side Html and Javascript:
You could do this efficiently by creating a partially transparent image I guess. Then change the background color of the element below the image using script. It depends on the type of picture and quality of the output if this is an option for you.
A better approach would be to change the color of pixels directly. Look for Html5 canvas pixel manipulation or use this link: Pixel manipulation with canvas. Scroll down to the Grayscale sample to start with.
Or server side C#:
Use image filters/direct pixel manipulation. Look for "Pixel Manipulation in C#" to find the right libs and API for your project and framework e.g. WriteableBitmapEx. More choices here: .NET Core Image Processing.

Fabric Js Multiple Canvas or Rerendering same canvas

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?

How save canvas state to db?

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.

Categories