Draw Circle Without Canvas Javascript

At get-go glance, learning to programme a circumvolve in a browser is a task that to many would seem senseless. Only believe it or not, creating a circle in a browser is a task that offers a lot of value to spider web designers of all skill levels.

Why take the time to render a circle with code, when we could only utilize an image editing plan like Photoshop to create the circle?

Past rendering the circumvolve in-browser, equally opposed to embedding an image or coding it in wink, we ensure that it will exist attainable from all devices (including Apple's) and that there will be no loss in quality if the circumvolve increases in size. Much like vector files used in Illustrator, with many of these methods, the circle can scale as the size of the browser increases. This becomes very useful in Mobile or Ipad application development, HTML5 games, and is a good base point for learning how to draw more circuitous objects.

Enough with the pocket-sized talk, allow's get started examining the various ways of drawing a circle.

CSS

This method uses the border-radius holding of CSS3, whose intended purpose is to circular out the edges of a div or other chemical element. The idea is to round out the edges to such an extent that the result looks something like a circle.

In order to get the shape to resemble a circle, this code required a tedious process of trial-and-error. To make information technology work, there were several CSS property values which had to be calculated and prepare.


/* css lawmaking */
div#css_example {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
edge-radius: 15px;
border: solid 2px #000000;
groundwork-color: #FF00FF;
width: 28px;
superlative: 28px;
margin-left: 25px;
margin-acme: 15px;
}

Although some of these CSS backdrop could potentially be adjusted by the intervention of Javascript, the border-radius CSS holding does not appear to accept been intended for the purpose of drawing shapes. Complicating things further is IE'due south lack of back up for the border-radius CSS property for all releases until IE9. For these reasons, this method should only be regarded as a novelty or hack.

HTML5 Canvas

A more legitimate method to draw a circle is to use the HTML5 Canvass chemical element. The start thing to be noted almost this HTML5 method is that it does not have a congenital-in scene graph, which means that the image is not saved as a set of objects (i.e., a red circle hither, a blueish square there), simply rather as a matrix of pixels.

In other words, if we were to depict a circle on ane side of the screen and then motion it to the other side, we cannot but move the existing circumvolve because the computer has no memory of the circumvolve; there is merely the retention of thebitmap that results from telling the computer to draw a circle. In this way, the method is comparable to cartoon with MS Paint, except nosotros're using Javascript to draw things instead of the cursor.


/* javascript lawmaking */
var c = certificate.getElementById("html_canvas_example");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF00FF";
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(40,30,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill up();
ctx.stroke();


For a more comprehensive listing of browsers that support the sail tag, bank check out this Wikipedia commodity.

SVG

Unlike the other three approaches discussed here, this method tin be implemented without the intervention of a scripting language and entirely inside the HTML document.

SVG's, or Scalable Vector Graphics, are written using XML tags. Unlike the Canvas tag, SVG elements are remembered in the Document Object Model (DOM), which ways that we can depict a circumvolve on the screen then refer to it again later by name.

Ane cool thing about SVG is that free tools are bachelor to edit them, such every bit svg-edit. Using this browser-based application, a person can create a circuitous shape and so copy-and-paste the lawmaking that will recreate information technology in HTML.


<!-- HTML CODE -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.one">
<circle cx="40" cy="30" r="fifteen" fill="#FF00FF"
stroke="#000000" stroke-width="2" />
</svg>


Like the canvas tag and the CSS method discussed above, this approach is well-supported by all major browsers except for IE, which merely began to support the nearly basics features of SVG in IE9. In addition, older versions of Android'south default browser do not natively back up SVG, although there are translation libraries available.

If interested in learning more about SVG, refer to w3schools.com.

Javascript libraries

The Raphael Javascript Library has rapidly become one of our favorite tools for making online apps. There are many libraries like this one whose purpose is to ameliorate the ease of creating graphics. This one does the job by interfacing with a combination of SVG and VM (Vector Markup). In this mode, Raphael could be considered an extension of SVG.


/* javascript lawmaking */
// create the canvas
var paper = Raphael("raphael_example");
// draw a circle at screen position (40,30) with radius 15
var circle = paper.circle(40,30,fifteen);// conform the circumvolve's attributes
circle.attr({
"fill" : "#FF00FF",
"stroke" : "#000000",
"stroke-width" : 2
});


Libraries like Raphael offer an elegant means of creating interactive graphics. However, they practice so at a price. The source code which must be included weighs in at almost xc KB (minified). For users operating on older systems, the consequential loading time could be meaning.

Because Raphael relies on SVG, information technology is bound to the limitations imposed by SVG—namely, a lack of all IE support except for IE9.

The Take-Away

If yous're creating complex images which require pixel-level manipulations, HTML Canvas might be for you. If, nonetheless, you're making something that requires a degree of interactivity with the user, you lot may be better off using SVG (or 1 of its associated libraries, like Raphael). Only information technology is wise to call up IE's lack of SVG support.

larayebere.blogspot.com

Source: https://www.dbswebsite.com/blog/four-ways-to-draw-a-circle-in-browser/