Javascript Draw Circle on Image
At starting time glance, learning to plan a circle in a browser is a task that to many would seem senseless. Only believe it or non, creating a circle in a browser is a task that offers a lot of value to web designers of all skill levels.
Why take the time to render a circle with code, when we could simply use an image editing program like Photoshop to create the circle?
By rendering the circle in-browser, as opposed to embedding an image or coding information technology in flash, we ensure that it volition be accessible from all devices (including Apple tree's) and that there will be no loss in quality if the circle 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 awarding development, HTML5 games, and is a good base of operations point for learning how to describe more circuitous objects.
Enough with the small talk, let's get started examining the diverse means of drawing a circumvolve.
CSS
This method uses the border-radius property of CSS3, whose intended purpose is to round out the edges of a div or other element. The idea is to circular out the edges to such an extent that the effect looks something like a circle.
In gild to get the shape to resemble a circle, this lawmaking required a tedious process of trial-and-error. To go far work, in that location were several CSS property values which had to be calculated and set.
/* css code */
div#css_example {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: solid 2px #000000;
groundwork-color: #FF00FF;
width: 28px;
superlative: 28px;
margin-left: 25px;
margin-top: 15px;
}
Although some of these CSS properties could potentially be adapted by the intervention of Javascript, the border-radius CSS property does not appear to have been intended for the purpose of drawing shapes. Complicating things further is IE'due south lack of support for the border-radius CSS belongings for all releases until IE9. For these reasons, this method should only exist regarded equally a novelty or hack.
HTML5 Canvass
A more legitimate method to describe a circle is to use the HTML5 Canvass element. The first thing to be noted virtually this HTML5 method is that it does not have a built-in scene graph, which ways that the image is not saved as a set of objects (i.e., a crimson circle here, a blue square there), just rather as a matrix of pixels.
In other words, if we were to draw a circle on one side of the screen and so move it to the other side, we cannot simply motility the existing circle because the computer has no retention of the circle; there is only the memory of thebitmap that results from telling the computer to depict a circumvolve. In this way, the method is comparable to drawing with MS Paint, except nosotros're using Javascript to draw things instead of the cursor.
/* javascript code */
var c = document.getElementById("html_canvas_example");
var ctx = c.getContext("second");
ctx.fillStyle = "#FF00FF";
ctx.strokeStyle = "#000000";
ctx.lineWidth = two;
ctx.beginPath();
ctx.arc(40,30,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
ctx.stroke();
For a more than comprehensive list of browsers that back up the sail tag, check out this Wikipedia article.
SVG
Unlike the other three approaches discussed hither, this method can exist implemented without the intervention of a scripting language and entirely within 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 nosotros can draw a circle on the screen and then refer to it once again later by name.
One absurd matter about SVG is that free tools are available to edit them, such every bit svg-edit. Using this browser-based application, a person tin create a circuitous shape and so copy-and-paste the code that will recreate it in HTML.
<!-- HTML Lawmaking -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.ane">
<circumvolve cx="40" cy="30" r="fifteen" fill up="#FF00FF"
stroke="#000000" stroke-width="2" />
</svg>
Like the canvas tag and the CSS method discussed higher up, this approach is well-supported by all major browsers except for IE, which only began to support the nearly nuts features of SVG in IE9. In addition, older versions of Android's default browser do non natively support 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 quickly go one of our favorite tools for making online apps. There are many libraries like this 1 whose purpose is to improve the ease of creating graphics. This ane does the task by interfacing with a combination of SVG and VM (Vector Markup). In this manner, Raphael could be considered an extension of SVG.
/* javascript code */
// create the canvas
var paper = Raphael("raphael_example");
// depict a circle at screen position (40,30) with radius fifteen
var circle = paper.circle(40,30,15);// arrange the circle'due south attributes
circle.attr({
"fill" : "#FF00FF",
"stroke" : "#000000",
"stroke-width" : 2
});
Libraries like Raphael offer an elegant means of creating interactive graphics. However, they do so at a toll. The source code which must be included weighs in at nearly 90 KB (minified). For users operating on older systems, the consequential loading fourth dimension could be meaning.
Because Raphael relies on SVG, information technology is bound to the limitations imposed by SVG—namely, a lack of all IE back up except for IE9.
The Take-Away
If y'all're creating complex images which crave pixel-level manipulations, HTML Canvas might exist for yous. If, however, you're making something that requires a degree of interactivity with the user, you may exist better off using SVG (or one of its associated libraries, like Raphael). But it is wise to think IE'south lack of SVG support.
Source: https://www.dbswebsite.com/blog/four-ways-to-draw-a-circle-in-browser/
0 Response to "Javascript Draw Circle on Image"
إرسال تعليق