Draw a circle with Canvas

What is canvas?

The HTML5 canvas element is used to draw graphics, on the fly, using javascript. This can be used to draw graphs, make photo composition or animations. It is only a container for graphics and it has several methods for drawing paths, boxes, circles, text, and adding images.

Create Canvas Element

<canvas id="myCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>

It is similar to div element, rectangular area on an HTML page. By default, canvas will not have any css properties unless we are not giving. We can style canvas element, the similar way we style a div. We have to use width and height for the element as per the requirement. It is always better to use ‘id’ for the canvas element, so that it can be easily identified.

Add the text as given in the code, it is fallback content, so that if the browser does not support this element, the given message will be displayed.

CSS

#myCanvas {
   width: 400px;
   height: 400px;
   border: 1px solid #c5c5c5c;
}

How to Draw a circle onto the Canvas?

The following is the script for drawing a circle.

    <script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.beginPath();
 ctx.arc(95,50,40,0,2*Math.PI);
 ctx.stroke();
 </script>

document.getElementById() retrieves the canvas element with the id myCanvas.
Then, we are getting the context of the canvas (2d) and storing it in ‘ctx’ variable. The getContext() method returns an object that provides methods and properties for drawing on the canvas element. Canvas element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. Here, we are using the arc() method for drawing a circle and adding the parameters. When we use this method arc(x,y,r,start,stop), x and y cordinates should be given at first, then the radius (r), then start and end position.

Demo



Your browser does not support the HTML5 canvas tag.

5 thoughts on “Responsive Table with CSS Media Queries

  1. Hi thanks for this post! I am trying to get iphone 5 to work with displaying a table that I’ve used as follows: http://tasteandsee.com/holiday-gift-guide-for-the-cook/

    I have tried a few different media queries specific to 320px width but to no avail.

    You will see I am not using the table as a traditional data table, instead it is a manual build of a shopping page so it has product images and links to purchase, etc. There are no header rows and so on.

    Is there a way to use a media query to get this table to display in a single column on smartphone w/320px width, such as iphone 5?

    Thank you!!

Leave a Reply

Your email address will not be published. Required fields are marked *