Tutorial by Examples: canvas

How to add the Html5 Canvas Element to a webpage

Html5-Canvas ... Is an Html5 element. Is supported in most modern browsers (Internet Explorer 9+). Is a visible element that is transparent by default Has a default width of 300px and a default height of 150px. Requires JavaScript because all content must be programmatically added to the Canv...

html5-canvas • Getting started with html5-canvas

Canvas size and resolution

The size of a canvas is the area it occupies on the page and is defined by the CSS width and height properties. canvas { width : 1000px; height : 1000px; } The canvas resolution defines the number of pixels it contains. The resolution is set by setting the canvas element width and heigh...

html5-canvas • Getting started with html5-canvas

Creating a responsive full page canvas

Starter code to create and remove a full page canvas that responds to resize events via javascript. var canvas; // Global canvas reference var ctx; // Global 2D context reference // Creates a canvas function createCanvas () { const canvas = document.createElement(&q...

html5-canvas • Responsive Design

Off screen canvas

Many times when working with the canvas you will need to have a canvas to hold some intrum pixel data. It is easy to create an offscreen canvas, obtain a 2D context. An offscreen canvas will also use the available graphics hardware to render. The following code simply creates a canvas and fills it ...

html5-canvas • Getting started with html5-canvas

Image cropping using canvas

This example shows a simple image cropping function that takes an image and cropping coordinates and returns the cropped image. function cropImage(image, croppingCoords) { var cc = croppingCoords; var workCan = document.createElement("canvas"); // create a canvas workCan.wi...

html5-canvas • Images

The Tained canvas

When adding content from sources outside your domain, or from the local file system the canvas is marked as tainted. Attempt to access the pixel data, or convert to a dataURL will throw a security error. vr image = new Image(); image.src = "file://myLocalImage.png"; image.onload = funct...

html5-canvas • Images

Is "context.drawImage" not displaying the image on the Canvas?

Make sure your image object is fully loaded before you try to draw it on the canvas with context.drawImage. Otherwise the image will silently fail to display. In JavaScript, images are not loaded immediately. Instead, images are loaded asynchronously and during the time they take to load JavaScript...

html5-canvas • Images

Detecting mouse position on the canvas

This example will show how to get the mouse position relative to the canvas, such that (0,0) will be the top-left hand corner of the HTML5 Canvas. The e.clientX and e.clientY will get the mouse positions relative to the top of the document, to change this to be based on the top of the canvas we subt...

html5-canvas • Getting started with html5-canvas

Canvas

Canvas is the simplest of panels. It places items at the specified Top/Left coordinates. <Canvas> <TextBlock Canvas.Top="50" Canvas.Left="50" Text="This is located at 50, 50"/> <TextBlock Canvas.Top="100" Canv...

xaml • Layout controls

Basic loading and playing a video on the canvas.

The canvas can be used to display video from a variety of sources. This example shows how to load a video as a file resource, display it and add a simple click on screen play/pause toggle. This stackoverflow self answered question How do I display a video using HTML5 canvas tag shows the following ...

html5-canvas • Media types and the canvas

Animate an image across the Canvas

This example loads and animates and image across the Canvas Important Hint! Make sure you give your image time to fully load by using image.onload. Annotated Code <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid re...

html5-canvas • Animation

How shapes & images REALLY(!) "move" on the Canvas

A problem: Canvas only remembers pixels, not shapes or images This is an image of a circular beach ball, and of course, you can't drag the ball around the image. It may surprise you that just like an image, if you draw a circle on a Canvas you cannot drag that circle around the canvas. That's be...

html5-canvas • Dragging Path Shapes & Images on Canvas

Dragging circles & rectangles around the Canvas

What is a "Shape"? You typically save your shapes by creating a JavaScript "shape" object representing each shape. var myCircle = { x:30, y:20, radius:15 }; Of course, you're not really saving shapes. Instead, you're saving the definition of how to draw the shapes. Then put...

html5-canvas • Dragging Path Shapes & Images on Canvas

Dragging irregular shapes around the Canvas

Most Canvas drawings are either rectangular (rectangles, images, text-blocks) or circular (circles). Circles & rectangles have mathematical tests to check if the mouse is inside them. This makes testing circles and rectangles easy, quick and efficient. You can "hit-test" hundreds of c...

html5-canvas • Dragging Path Shapes & Images on Canvas

Dragging images around the Canvas

See this Example for a general explanation of dragging Shapes around the Canvas. This annotated example shows how to drag images around the Canvas // canvas related vars var canvas=document.createElement("canvas"); var ctx=canvas.getContext("2d"); canvas.width=378; canvas.h...

html5-canvas • Dragging Path Shapes & Images on Canvas

Clear canvas with gradient.

Rather than use clearRect which makes all pixels transparent you may want a background. To clear with a gradient // create the background gradient once var bgGrad = ctx.createLinearGradient(0,0,0,canvas.height); bgGrad.addColorStop(0,"#0FF"); bgGrad.addColorStop(1,"#08F"); ...

html5-canvas • Clearing the screen

Capture canvas and Save as webM video

Creating a WebM video from canvas frames and playing in canvas, or upload, or downloading. Example capture and play canvas name = "CanvasCapture"; // Placed into the Mux and Write Application Name fields of the WebM header quality = 0.7; // good quality 1 Best < 0.7 ok to poor fps =...

html5-canvas • Media types and the canvas

Drawing two rectangles on a

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Draw two rectangles on the canvas</title> <style> canvas{ border:1px solid gray; } </style> <script async...

HTML • Canvas

An index to Html5 Canvas Capabilities & Uses

Capabilities of the Canvas Canvas lets you programmatically draw onto your webpage: Images, Texts, Lines and Curves. Canvas drawings can be extensively styled: stroke width, stroke color, shape fill color, opacity, shadowing, linear gradients and radial gradients, font face, font ...

html5-canvas • Getting started with html5-canvas

Clear canvas using composite operation

Clear the canvas using compositing operation. This will clear the canvas independent of transforms but is not as fast as clearRect(). ctx.globalCompositeOperation = 'copy'; anything drawn next will clear previous content.

html5-canvas • Clearing the screen