Looking for some creative inspiration? Want to implement latest trends? Or Seeking the latest buttons, textures, or graphics? Then 3D Mick is the right place for you, as there is always something interesting to be found here.
Designers always need new elements to make each of their projects look amazing. And this is why it’s important to have a lot of resources to count on. You can’t mug up everything and hence people often find themselves looking up simple things in various places but many times they are just too long to explore. That’s where this 3D Mick comes handy with its’ compact, easy to learn and at most few pages blog.
In this particular blog, we are going to discuss about HTML CANVAS, which is new & quite an interesting feature provided by HTML5.
Introduction of Canvas
Canvas can be used to represent something visually in your browser. Such as: simple diagrams, animations, charts and graphs, etc. via scripting language. The element is only a container for graphics. You must use a script to actually draw the graphics. It has several methods for drawing paths, boxes, circles, characters, and adding images. Canvas element allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. In Canvas which is raster-based, once some figure is drawn, the fact that it was drawn is forgotten by the system. If its position were to be changed, the entire scene would need to be redrawn, including any objects that might have been covered by the rectangle. canvas is a lower-level API upon which an engine, supporting for example SVG, might be built.
The HTML5 Canvas element is an HTML tag similar to the
Here in the example given below, you can learn how to draw a canvas:< ! DOCTYPE html>This will draw a rectangular canvas on your screen, just like the one shown below:
Now let’s add some more code to draw something on our canvas:
< ! DOCTYPE html>
This will generate the following output:
The 1st line of the function is nothing special; it just finds the element in the DOM.
Every canvas has a drawing context, which is where all the fun stuff happens. Once you’ve found an element in the DOM (by using document.getElementById() or any other method you like), you call its getContext() method. You must pass the string “2d” to the getContext() method. The fillStyle property can be a CSS color, a pattern, or a gradient. fillRect(x, y, width, height) draws a rectangle filled with the current fill style.
Till date, there is no 3-D Canvas. Individuals have experimented with their own three-dimensional canvas APIs, but none have been standardized. For more information on upcoming technologies and trends in I.T., keep on visiting our blog as everyday you will find something new to read.