How do we link two canvases (one showing 2d drawing and other 3d) on a webpage using JavaScript and P5.js so that if one shape is modified then it also affects the other canvas shapes?
Yeah, thank you. How they can be linked/interactive? If we change drawing in first screen, other screen also show that change.
It sounds like you're looking for instance mode.
You can read more about instance mode here, but basically it allows you to have multiple sketches running on the same page.
Get something very simple working, such as showing a circle on one canvas and a rectangle on another canvas. Then build up from there.
Related
We are facing the following challenge: We are creating a behavioral experimentation library, which both needs to be able to show random shapes as well as display forms.
For the shape drawing part we use pixi.js, and even though we know it can also use canvas2D, we prefer it to use WebGL as its rendering engine, which uses the 3D context of the canvas. Pixi however doesn't really have the ability to draw form elements on the canvas, so we decided to use Zebra/Zebkit for this, but zebra can only draw to 2d context.
According to many sources, it's impossible to use 2D and 3D context simultaneously with a single canvas, or switch from 2D and 3D context (and vice versa) after the canvas has been initialized. We therefore decided to create 2 separate canvases, one with a 3D context to use with Pixi.js, and one with a 2D context to use with Zebra/zebkit. When necessary, we switch the canvases by showing one and hiding the other.
This works quite well when the canvases are integrated in the web page, but less optimal when we want to display the experiment fullscreen. It is very difficult to switch from one canvas to the other in fullscreen, because you can only choose one DOM element at the time to be displayed full screen, and weird stuff happens when you start hiding the full screen element to show another. My question is: what would be the best approach to tackle this problem? I already have several in mind:
Put both canvases in a container div, and display this container fullscreen instead of the canvases itself. I don't know if this is possible, or if this will have any negative side effects compared to showing a canvas in fullscreen directly.
Render the zebkit canvas on top of the pixi canvas by making sure it is on top of the overlay item, as suggested in How do I make a DIV visible on top of an HTML5 fullscreen video?. This situation seems very hacky though, and I smell inconsistency issues between the various browsers that are around already.
Use the method described in How do I make a DIV visible on top of an HTML5 fullscreen video? to render normal HTML form elements on the pixi canvas. I predict there will be some resolution/rendering problems to tackle though, because you don't have the degree of control over the pixel raster as you have with canvas items.
I have a canvas where I manually create rectangles to build a full individual chart diagramm. Doing some coloring and text placing etc...
How can I easily tell a certain area to hide itself and show again?
Can there be a object orient approach to divide the canvas somehow in areas?
I don't think that there is a solution that works the way you want. Canvas element don't keep track of areas are elements like you know it from the dom. There are some things you can do:
Think about using svg. SVG works more like html and can be manipulated via javascript/dom and css.
Redraw the whole canvas with the elements you want to display. You don't have to do this manually. Some framework like paper.js or kinetic.js will help. These framework also have feature like layers.
The canvas element has the api functions getImageData and putImageData. With these functions you can save an area of the canvas into a javascript array and blank the area using the canvas drawing functions. When needed, you can redraw the area with the putImageData function.
In my web application I want the user to be able to draw some rectangles on an image, also change the size of the rectangles and drag and drop them. after that I have to get coordinates of rectangles and send them to server's database
Is it better to create a canvas on a photo or load the image in canvas ?
I don't write any code yet because I have no idea how to do this.
Any ideas,suggestions,links,libraries ?
As the comment said canvas is a good bet for this, but you'd need to do a fair bit of coding to get it working.
I actually have a tutorial on making Canvas interactive by drawing rectangles and moving them around. It should give you a good start on this project.
There are also a few libraries, such as fabricJS, but that might be hard to get the coordinates out of without digging into the library.
Im starting on some simple-to-complex canvas scripting. I want to draw a circle. That's easy. The problem is the circle is drawn right away. What if I wanted the circle to slowly grow (lets say from a vertical line, to a semi circle, to a half circle, to a full circle) Is there any way in canvas to do this (natively) or do I need to make a function that builds and deletes several circles (quickly) to simulate the effect?
If the latter is true, is there any sort of performance hits I should be looking out for?
Thank you!
Any form of animation using canvas requires the canvas to be cleared and the next drawing in the sequence to be made. The Mozilla Development Network has a good tutorial on canvas and canvas animations.
Check out the animate.js library. Its is exactly what you need. Usage is same as jQueryUI.
What you need can be done by the following piece of code:
canvas_element.animateCircle(x,y,r);
There are other optional parameters like animateCircle(x,y,r,{'lineWidth':5, 'lineColour':'red', 'stop': function() {alert('completed');}}) & some other functions. Check the Readme file for details.
I decided last week that I wanted to play around with the Canvas. I am making a simple webapp (at my daughter's request), where there are ponies, and you can add them to your own picture and move them around.
I already have it so when a button is pressed, a picture of a pony comes up on the canvas.
My question now is, what is the best way to move multiple images when they are already on the canvas?
It would be great if I could drag them each, but I can only find tutorials using KineticJS, and I cannot get that to display how I want.
So, are there any other dragging images on Canvas tutorials out there?
Otherwise It would be okay to use keyboard buttons, but I cannot figure out how to do that with multiple images. When I use keyboard buttons, it moves all images at once.
Any ideas?
You have to keep track of where you draw each one, clear the entire canvas, and redraw each and every one of them (presumably moving some of them in the process).
None of this is built in to Canvas. I have a tutorial on making the Canvas interactive that covers keeping track of, placing, and moving (selecting) shapes on a Canvas. There's a live demo on that page and source code at the bottom of the article.