Develop Reference

Using Canvas to display images for animation purposes

I'm getting into web animations, WebGL, Canvas, ThreeJS, GSAP and all those fun tools. I'm investigating different websites and how they're able to achieve certain effects.
I am mind blown by these two sites: https://14islands.com/ & https://www.hellomonday.com/.
Their animations look simple(ish). Liquid effect on images. I know with ThreeJS filters or WebGL or other Canvas libraries you can achieve the effects. What I don't understand is that both of these sites have a full-sized <canvas> element fixed to the background. And render almost all the images on the site through the <canvas> rather than pure HTML elements.
This allows to have all images to have really dope effects. But what I don't understand is how can they sync the positions and sizes of the images with HTML DOM elements so perfectly?
This seems like a nightmare to code. Also wouldn't it be a huge performance burden to update every image on the canvas when the user scrolls or resizes the page?
I believe I'm missing something. Perhaps there's a library that handles most of this?
If there are any simple examples, I'd love to see them.
Thank you for your time :)

Welp turns out this can be done quite simply with ThreeJS. Perhaps there are ways as well but this seems easiest to me.
TL;DR: You can create a scene for a div, and you can do this multiple times with ThreeJS so that it renders a scene within the specified div.
Demo: https://threejs.org/examples/?q=multiple#webgl_multiple_elements
Code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_multiple_elements.html

How To Give Effect Particle while mouse move and Luminous while hover in canvas

I hope this Question is still accepted in Stack Overflow since What I want to Know is The technique to make this effect. Recently I found a very cool website Landing animation that give effect such as light particle (this looks like parallax.js as far as I know) that moving while we move our mouse and a Luminous effect while hovering in a specific location.
I know fully that we can Achieve Hover using css and light particle using javascript, but how can I achieve this while using a canvas like in this website for example? when I tried to inspect element of this site, it seems using canvas to achieve this, so I'm curious if I want to make a website like this, what is the technique I must learn since I'm quite confused where to start if I want to achieve this kind of effect?
reference site: Genshin Impact landing page
the effect that I want to achieve:
Can someone help me or tell me where must I start if I want to achieve this, since I want to try learning to make this kind of cool Effect using css and Js?
some article that I read:
2-ways-to-create-an-animated-particle-background
particles-animation-codepen
particle-animation-code-snippets
easing-animations-in-canvas/
how-to-achieve-this-hover-effect

Websites like these are built using WebGL which uses GPU to render these 3d effects. GPU usage is only possible through the canvas as of now.
There are various javascript libraries out there through which you can achieve such results. The most popular among them is three.js. It is used to build amazing 3d websites nowadays. Some other libraries are babylon.js, particle.js etc.

Rotate 3d Image using Three.js or somthing else

So I just found Three.js and it looks like a pretty cool JS library. What I'm trying to do is take a 2d image and wrap it around an object in three.js and rotate it like a 3d image. I found a few jquery libraries that offer similar functionality such as SpriteSpin, but most of the discussions and resources I found seem outdated and three.js seems to beat all the jquery plugins performance wise.
So playing around with one of the examples on three.js website I manage to produce this here. As you can see it doesn't look great.
So I'm wondering if it would be possible to flatten out a 3d image into a 2d, like the one below and wrap it around a shape in three.js and then rotate that image.
Since most of the discussion I found on how to achieve similar functionality seemed outdated, I am open to any suggestions on how to do this using more current browser based technologies. Would it be best to use WebGl or canvas, or maybe css3 supports this type of 3d functionality. Do I need to use three.js, or is there a smaller library that supports this functionality? Basically whats the best way to achieve this without having to loop through a bunch of images like some of the jquery libraries do.

Uses for canvas | Practical examples

I'm trying to understand what people use canvas for?
I see it on job postings I read about it in Definitive JavaScript, but I don't quite get what it is used for.
I understand that you can draw 2d or 3d ( usually 2d ) objects but why no just use Gimp or Photoshop and upload the image.
Is it so you can create dynamic images based on say...user-specific data?
What is a practical example or perhaps a link to a professional implementation of canvas ( Definite JavaScript show basis stuff like drawing circles ).
MDN Tutorial

I have used a canvas to draw a graph, and it falls back to requesting a PHP-generated image if the browser doesn't support <canvas>. It's always a good idea to delegate processing from the server to the client, as this places less load on the server. In other words, instead of the server going "here's the stuff", it's more like "here's the data and the instructions to show it".
Another use I've seen is to highlight areas of an imagemap when moused over.
<canvas> is central in HTML5 game development, since it is used to draw the entire game viewport. Without it, there is no game.

Is it so you can create dynamic images based on say...user-specific data?
Yes

We used <canvas> to build interactive design editor for apparel in our e-commerce store — http://printio.ru/tees/new
The kind of interactivity we provide was only possible with Flash until recently.
Even on back end, we use Node.js and <canvas>-based image processing+generation to take data from online editor and create designs that are later used in store. These canvas-generated designs are eventually printed out on tshirts, mugs, caps, bags, and so on.
I think that's a pretty practical example :)
This is all done via Fabric.js canvas library (developed by us as well).

<canvas> is used for better Performance. <canvas> is much more faster and dynamic than jpeg or anything else. Example: http://www.profistart.com/internetseiten.html here was <canvas> used for Background.

How do I draw my Box2D world using HTML5 Canvas instead of Debug Draw?

I know HTML5 canvas fairly well, I know the basics and animation using loops etc.
Demo I'm working with: (click to make shapes) http://henry.brown.name/experiments/box2d/example-canvas.html
What I'm not very familiar with is Box2D. I'm using the Box2DWeb port, I heard it was newer than Box2D-js, I'm not sure which is best.
I know how to initialize the 'world' and I can place objects in the world. I then use Step to animate the world - however to display it on the screen so far I've only been able to get it working with debug draw as it basically does everything for you.
Instead of using debug draw I'd like to use canvas to draw, for example a car instead of just a square. How do I attach the physics of a square to the image of a car? I just can't get my head around integrating canvas with Box2D.
Any tips will be massively appreciated!
Thanks

I spent the last few days trying the same thing.
I found Jonny Strömberg's tutorial, which is not super detailled but by analyzing the code I found how he retrieves the body's position:
var b = world.GetBodyList()
GetBodyList() seems to be an iterative Array, so the next body is accessible through b.m_next.
You can then use
b.GetPosition().x
b.GetPosition().y
b.GetAngle()
to retrieve the body's coordinates.
EDIT: this code is for the Box2dweb library, which I found better documented than Box2djs

If you aren't familiar with Box2D you should check out the documentation at http://www.kyucon.com/doc/box2d/. This should tell you all of the properties you need. To my knowledge the standard way of using Box2D is to attach an image with userData. See this example tutorial for image and Canvas image usage.
http://www.jeremyhubble.com/box2d.html

I had the same question.
here is the documentation of it.
You could use calls like GetBodyList() , GetAngle()and members like m_position to get all that you need to paint whatever using whatever library you want to use on a canvas.