HTML5 Canvas Bouncing BallsUse this code to add a cool animated effect to your HTML5 canvas where dots appear to explode across the canvas.
HTML5 Canvas Floating HeartsUse this code to add different shadows to your canvas text. In canvas, there are 4 different shadow properties: offsetX, offsetY, shadowColor, and shadowBlur. Offsets X and Y are just the values at which the shadow should be separated from the actual text. shadowColor refers to the color of the shadow -- this one needs to be set because the default shadowColor value is transparent, meaning the a shadow won't be visible unless you set this. shadowBlur takes a numerical value and smoothes the edges of the shadow to make it more aesthetically pleasing.
HTML5 Canvas Animated HeartExperiment with this bursting particle effect code to enhance your canvas animation skills.
HTML5 Canvas Rotating Switching CrossesAdding gradients and shadows to text within the HTML5 canvas is an easy way to create some texture in your designs. Customize the colors and the shadow blur and make it your own!
HTML5 Canvas Circular Loading AnimationCreating a simple paint application using HTML5 Canvas is easy and fun. Once you feel comfortable with this code, be sure to play around with different "paint brush" colors, shapes, and sizes.
HTML5 Canvas Aurora Borealis Effect
To wrap text with HTML5 Canvas, we can create a custom function that requires the canvas context, a text string, a position, a max width, and a line height. The function should use the measureText() method of the canvas context to calculate when the next line should wrap.
HTML5 Canvas Animated Progress Bar
To get the text metrics of HTML5 Canvas text, we can use the measureText() method of the canvas context which returns an object containing a width property. This method requires a text string and returns a metrics object based on the provided text and the current text font assigned to the context.
Note: Since the height of the text in pixels is equal to the font size in pts when the font is defined with the font property of the canvas context, the metrics object returned from measureText() does not provide a height metric.
HTML5 Canvas Exploding Noodle Effect
To start an HTML5 Canvas animation, we can can continually request a new animation frame, and to stop the HTML5 Canvas animation, we can simply not request a new animation frame.
Instructions: Click on the canvas to start and stop the animation.
HTML5 Canvas Waterfall Effect
Instructions: Mousedown in the color area to choose a color.
HTML5 Canvas Night Sky Effect
To load the canvas with an image data URL, we can make an AJAX call to get a data URL, create an image object with the URL, and then draw the image onto the canvas with the drawImage() method of the canvas context.