HTML5 Canvas - Basics

-
In this post we will take a look at the HTML5 Canvas element and how to use it.

What is canvas?

HTML5 canvas element provides platform to draw stuff on it and also animate them.

How to create a Canvas?

Canvas is a html5 element, which is created as below:

<canvas id="mycanvas" width="578" height="200"></canvas>

How to get a handle to the canvas?

In order to draw shapes or write text into the canvas, we need to get a handle to the canvas object. This could be done in javascript as below:

<script>

      var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

	  //TODO

</script>

Entire html code:

<!DOCTYPE HTML>

<html>  

  <body>

    <canvas id="myCanvas" width="578" height="250"></canvas>

    <script>

      var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      //TODO	  

    </script>

  </body>

</html> 
The TODO line above is where we start writing javascript code to draw shapes etc and play around with the canvas. The code in the following sections are intended to be placed after the TODO.


How to draw a line?



 Lines are drawn from the current position of the cursor till the destination x and y coordinates provided. Note that the coordinates are relative points from top left corner of the canvas.

To move the cursor around, we can use the moveTo function.

The width of the line could be set using the lineWidth attribute of canvas.
The color of the line could be set using the strokeStyle attribute of canvas. You can give either rgb values or hex values.


context.beginPath();
//move the cursor to position (100,200)
context.moveTo(100, 200);
//draw line from (100,200) to (400,100)
context.lineTo(400, 100);
//set line width
context.lineWidth = 10;
//set line color
context.strokeStyle = '##FE2E2E';
context.stroke();



How to draw an arc?


To draw an arc, we need to specify the coordinates of the center of the circle and also the radius. The start and end angles decide how big or how complete the arc should be relative to the circle. Whether the arc should be drawn in clockwise/counter clockwise is decided by the last parameter (boolean).

context.beginPath();
var centerX = 250;
var centerY = 150;
var startAngle = 0.4 * Math.PI;
var endAngle = 1.8 * Math.PI;
var radius = 50;
var counterClockwise = false;
context.lineWidth = 5;

context.arc(centerX, centerY, radius, startAngle, endAngle, counterClockwise);
context.stroke();


How to draw a circle?

Circle is a special case of arc, where the start angle is 0 and end Angle is 2* Math.PI.

How to draw a rectangle?


To draw a rectangle, use the rect() function, which takes the x and y coordinates of the top left corner of the rectangle, along with width and height.

context.beginPath();
var x = 100;
var y = 100;
var width = 300;
var height = 200;
context.rect(x, y, width, height);
context.fillStyle = 'red';
context.fill();
context.stroke();

Comments

Post a Comment

Popular posts from this blog

Pivotal Cloud Foundry (PCF) Integration with Elastic Cloud Storage (ECS)

-
Recently, I was involved in integrating Pivotal Cloud Foundry with Elastic Cloud Storage (ECS), an object storage solution from EMC. In this post, I'm going to document the hiccups we faced during this integration and how did we resolve this, so that it is easier for other folks who would like to carry out this integration. References: We followed the blog post, https://blog.codedellemc.com/2016/01/05/emc-ecs-with-cloud-foundry/ and the service broker code from git hub, https://github.com/spiegela/ecs-cf-service-broker .  1. application.yml file Configuration: First task would be to update the application.yml file in the broker code to have the correct configuration. Note the spring profiles created in yml file. The active spring profile is defined in the build.gradle file to be 'development'. So based on that, we need to update the correct section in the yml file. Under the broker section: a) Provide a valid ECS namespace name (The namespa
Read more

Restful code example using Spring MVC

-
In my previous blog, I talked about Restful webservices design. In this blog, I will provide sample code for the same using Spring MVC framework. Spring MVC 3.x supports annotation based controllers, which are Restful in nature.  Let us create a sample Spring web application for performing CRUD on User entity. Creating project: Create a Maven project with a archetype 'maven-archetype-webapp'. pom.xml <!-- version property --> <properties> <spring.version>3.1.2.RELEASE</spring.version> </properties> <!-- servlet dependency for compilation --> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <type>jar</type> <scope>compile</scope> </dependency> <!-- Spring MVC dependencies --> <dependency> <groupId>org.springframework</groupId> <artifactId&
Read more

Spring Integration - Bulk processing Example

-
Image
In this post, I'm going to share my experience in using Spring Integration for a bulk processing task. This was the first time I was using Spring Integration and it did not disappoint me. It was pretty robust in terms of error handling and definitely scalable. Disclaimer: The actual task being performed has been modified into a fictitious e – commerce domain task, since I cannot reveal the original task which is customer specific and confidential. However, the nature of the task in terms of processing of clob and xml remain the same and the complexity of the original task has been retained. Also, the views posted on this post are strictly personal. Objective: The objective is to work upon customer information from an ecommerce application and process it and save it into database as clob data. The task is to perform data processing by reading xml from a file in the file system and then store it as clob into a table. Following is the high level of tasks required t
Read more