How To Draw Dots On Canvas Using Javascript Or Jquery

Amongst the set of goodies in the HTML 5 specification is Canvas which is a manner to programmatically depict using JavaScript.

We'll explore the ins and outs of Sheet in this article, demonstrating what is possible with examples and links.

Why Do Y'all Need Canvas?

Canvas can be used to represent something visually in your browser. For example:

• Unproblematic diagrams
• Fancy user interfaces
• Animations
• Charts and graphs
• Embedded drawing applications
• Working around CSS limitations

In basic terms information technology's a very unproblematic pixel-based cartoon API, but used in the right way it tin exist the building block for some clever stuff.

What Tools Are at Your disposal?

Cartoon tools

• Rectangles
• Arcs
• Paths and line drawing
• Bezier and quadratic curves

Effects

• Fills and strokes
• Shadows
• Linear and radial gradients
• Alpha transparency
• Compositing

Transformations

• Scaling
• Rotation
• Translation
• Transformation matrix

Getting data in and out

• Loading external images by URL, other canvases or data URI
• Retrieving a PNG representation of the current canvas every bit a data URI

This first-class Canvas cheat canvas is a keen reference of the commands available.

Getting Started

To use Canvas, you'll demand two things

• A Canvas tag in the HTML to identify the drawing sail
• JavaScript to exercise the drawing

The Canvass tag is basically an img tag without any data. Y'all specify a width and a superlative for the drawing area. Instead of an alt attribute, yous can enclose HTML within the sail tag itself for culling content.

Example of a Canvas tag:

<sheet id="myDrawing" width="200" height="200">
<p>Your browser doesn't back up canvas.</p>
</canvas>

With a Canvas element in the HTML, we'll add the JavaScript. We need to reference the Canvas element, bank check the browser is Sheet-uniform and create a drawing context:

var drawingCanvas = certificate.getElementById('myDrawing');
// Bank check the element is in the DOM and the browser supports canvas
if(drawingCanvas.getContext) {
// Initaliase a ii-dimensional drawing context
var context = drawingCanvas.getContext('second');
//Canvas commands go here
}

Checking for the getContext() method on a sail DOM object is the standard mode of determining canvas compatibility.

The context variable now references a Canvas context and can exist drawn on.

Bones Drawing

And so, permit'due south become started with an example to demonstrate the nuts. Nosotros're going to depict a smiley confront, like to the one on the Acid2 reference rendering.

If we call up nearly the face as a set of bones shapes, we have:

1. A circle, with a black stroke and xanthous fill for the face.
2. two circles with a black stroke and white fill and with an inner circle of filled light-green for the eyes.
3. A curve for the smiling.
4. A diamond for the nose.

Let's start past creating the circular face:

// Create the yellow face
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*two,true);
context.closePath();
context.stroke();
context.fill();

You can meet from the above that we start by defining some colours for the stroke and fill, then nosotros create a circle (an arc with a radius of 50 and rotated through the angles of 0 to 2*Pi radians). Finally, we employ the stroke and fill that has been divers previously.

This process of setting styles, drawing to co-ordinates and dimensions and finally applying a fill or stroke is at the heart of Canvas drawing. When we add together the other face elements in, we get:

Download the total source code of the smiley face example

Furnishings and Transformations

Let's run across how we can dispense an existing image in canvas. We can load external images using the drawImage() method:

context.drawImage(imgObj, XPos, YPos, Width, Meridian);

Hither'south the paradigm we're going to play with:

We're going to give the prototype a red frame. For this we'll use a rectangle and make full it with a radial slope to give information technology a chip of texture.

          //Create a radial gradient. var slope = context.createRadialGradient(90,63,30,90,63,90); gradient.addColorStop(0, '#FF0000'); gradient.addColorStop(1, '#660000'); //Create radial gradient box for picture frame; context.fillStyle = gradient; context.fillRect(15,0,160,140); //Load the image object in JS, then use to canvas onload var myImage = new Image(); myImage.onload = part() { context.drawImage(myImage, thirty, 15, 130, 110); } myImage.src = "cocktail.jpg";        

To make our portrait expect like it's hung on a wall, we'll add a drop shadow and rotate the image slightly so information technology looks at a slight angle.

A drop shadow will need to be applied to the frame.

//Create a drop shadow
context.shadowOffsetX = ten;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "black";

Download the full source code of the portrait example

To rotate the canvas, we employ the rotate() method which takes a value in radians to rotate the canvass past. This merely applies rotation to subsequent drawing to the canvas, then make sure yous've put this in the right place in your lawmaking.

//Rotate picture
context.rotate(0.05);

This is what the finished frame looks like:

Download the full source code of the portrait instance

Animation and Physics

Canvas drawings tin can be blithe by repeatedly redrawing the canvass with different dimensions, positions or other values. With the employ of JavaScript logic, you lot can also apply physics to your canvas objects as well.

Example uses:

• Billowy Balls by Efeion
• js-fireworks past Kenneth Kufluk
• Using canvass in conjunction with the HTML 5 sound element and a Twitter mashup to create the HTML5 Canvas and Audio Experiment

Displaying Fancy Fonts

Canvas can be used as a way of displaying non-standard fonts into a web page equally an culling to technologies like sIFR. The Cufon project is ane such implementation. Canvas-based font replacements like Cufon have advantages over sIFR, in that there are fewer resource overheads and no plug-in is required, withal there are a few disadvantages:

• It generates lots of marker-up
• Fonts are embedded, therefore it breaks the license terms of many fonts
• Text can't be selected

Fonts need to be converted for employ in Cufon using the tools on the Cufon homepage.

Letting Your Users do the Drawing

JavaScript tin interact with mouse and keyboard events, so you can create embedded cartoon applications with sail as the following examples demonstrate:

• Lightweight sketches with Tiny Putter by Andrew Mason
• An MS pigment clone in canvass past Christopher Clay

Making up for Browser CSS Deficiencies

Can't wait for CSS3 support and want to add rounded corners, gradients or opacity without creating lots of images? Projects similar jqcanvas add canvas tags behind standard HTML elements to add pattern to your web page.

Browser Support

The latest versions of Firefox, Safari, Chrome and Opera all enjoy reasonable to good support for Canvas.

What about Internet Explorer?

IE does not support canvas natively (every bit of IE8), nonetheless it has been given some compatibility thanks to the ExplorerCanvas projection and is simply a thing of including an extra JavaScript file before whatever canvas code in your page. You lot can hide it from other browsers in the standard way, using conditional comments.

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

ExplorerCanvas fifty-fifty extends canvas support to IE6, although it's not perfect so don't look it to render as well every bit modern browsers that support canvas natively.

Accessibility

Canvas isn't currently thought of as accessible equally there is no marking-up generated or API for textual content to be read. Fallback HTML tin exist added manually within the canvas tag, only this will never be adept enough to represent the canvas in an accessible way.

Thinking About HTML 5 Canvas Accessibility past Steve Faulkner explains the problems in more detail. At that place is now a general consensus that accessibility needs to be addressed which has lead to the Protocols and Formats Working Group at the W3C recently opening a give-and-take into proposals for adding accessibility for Canvas with input from others.

In Summary

Although Sheet adds features to a page, I don't recollect it has been peculiarly well thought out. In many ways it feels like a step into the past and represents a very old-fashioned style of drawing that is junior to the modern XML-based SVG standard. It is pixel-based, as opposed to the nice vectors of SVG and to draw with it entails writing lots of unmanageable JavaScript. The lack of accessibility is also a large trouble.

However, what Canvas has going for it, that SVG doesn't, is that it can integrate with our existing web pages very easily. We can likewise piece of work with canvas in much the same style we piece of work with images in spider web pages.

By looking at the few examples in this article, we can go an idea of the diversity of situations that Canvass can be applied to. Although the syntax may exist frustrating, Canvass gives us drawing technology that we can use right abroad to enhance our pages.

Please requite your thoughts, link to further examples or whatsoever feedback below.

Farther Reading

• Doodle.js – a nice library for working with canvass
• Canvas Tutorial at Mozilla Developer Center
• HTML five canvass – the basics on the Opera Developer Community

Other Examples

• Live photo editing with Canvas Photograph Demo
• Live video editing using canvass
• Online function applications with Mozilla Bespin
• Super Mario Bros
• Virtually of the Chrome Experiments.

• code
• html5

Larn to code with Treehouse

Start your 7 day free trial today and go admission to hundreds of video courses in web development, design and business!

Acquire more than

Source: https://blog.teamtreehouse.com/how-to-draw-with-html-5-canvas

Posted by: wrightcoma1941.blogspot.com

Share this post