Best HTML5 Canvas Rectangle Tutorials with Examples

 Courses / Web Development /HTML5 Tutorials

Welcome to the world of design in HTML5 Canvas Rectangle

HTML5 has lots of new features for modern web designing. we can make shapes & images by the use of Canvas & SVG. In SVG , web designer can make ractange,

Some examples of Canvas Rectangle

1.First Example of Canvas Rectangle

Coding of this example

<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
var ansh = document.getElementById('myCanvas');
var rect = ansh.getContext('2d');
rect.beginPath();
rect.rect(50, 50, 200, 200);
rect.fillStyle = 'red';
rect.fill(); </script>

2.Second Example of SVG Text with Stroke

Coding of this example

<svg height="80" width="400" id="text">
<text x="0" y="40" fill="red"stroke="black" stroke-width="2">
Hallow world of SVG text
</text>
</svg>


3.Third Example of SVG Vertical Text

Vertical Text

Coding of this example

<svg height="550" width="200" id="text">
<text x="50" y="10" fill="red" stroke="black" stroke-width="2" style="writing-mode: tb; glyph-orientation-vertical: 0; style="letter-spacing:65;>
Vertical Text
</text>
</svg>

4.Forth Example of SVG Text with transform

Hallow world of SVG text

Coding of this example

<svg height="420" width="500" id="text">
<text x="20" y="50" fill="red" transform="rotate(-90 220,200)">Hallow world of SVG text</text>
</svg>
HTML5 svg rectangle in Delhi