Total Pageviews

Thursday, April 16, 2015

Canvas Method to Draw different shape like Rectangle, filled rectangle, circle, line, setting style to canvas element



Canvas Example to draw Rectangle



Draw rectangle
ctx.rect(x, y, width, height);


ctx.stroke();
stroke() is used to draw outline of shape to define color of stroke you can use method 

ctx.strokeStyle="white";




Fill rectangle: method is used to filled shape with color default color is black
context.fillRect(x, y, width, height);

ctx.fill();: using this method you can fill any shape 

with color default color is black. you can define fill color of any shape using method

ctx.fillStyle="red";

 

Stroke rectangle
ctx.strokeRect(x, y, width, height);
 
<DOCTYPE html>
<html lang="en">
<head>
        <style>
         #myCanvas{background-color:orange;
          border: 2px solid black;
          width:800px;
          heigh:400px;}
        </style>
</head>
<body>
<canvas id="myCanvas">
</canvas>
         <script>
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.rect(20,20,60,100);
            ctx.strokeStyle="white";
            ctx.fillStyle="red";
            ctx.fill();
            ctx.stroke();
        </script>
</body>
</html>

 
Lets We add Shadow effect To This Rectangle 
 Canvas methods are 
ctx.shadowOffsetX="20";
used to define shadow  distance along x axis may be + or -value
ctx.shadowOffsetY="20";
used to define shadow  distance along Y axis may be + or -value
ctx.shadowColor="black";
used to define shadow  Color
ctx.shadowBlur="20";
used to define shadow Blur

Lets See Canvas Rectangle Example with Shadow Effect


 <DOCTYPE html>
<html lang="en">
    <head>
        <style>
         #myCanvas{background-color:orange;
              border: 2px solid black;
              width:800px;
              heigh:400px;}
     </style>
    </head>
<body>
        <canvas id="myCanvas"></canvas>
<script>
    var n=800;
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,60,100);
    ctx.strokeStyle="white";
    ctx.fillStyle="red";
    ctx.shadowOffsetX="20";
    ctx.shadowOffsetY="20";
    ctx.shadowColor="black";
    ctx.shadowBlur="20";
    ctx.fill();
    ctx.stroke();
</script>
</body>
</html>




Canvas Example to draw Circle


 
Draw circle
ctx.arc(x, y, radius, 0, Math.PI * 2);
Arc:
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

ctx.fill();

ctx.stroke();
·         Styles
Fill
ctx.fillStyle = 'red';

ctx.fill();
Stroke

ctx.strokeStyle = 'red';

ctx.stroke();



<DOCTYPE html>
<html lang="en">
    <head>
        <style>
         #myCanvas{background-color:orange;
              border: 2px solid black;
              width:800px;
              heigh:400px;}
     </style>
    </head>
<body>
        <canvas id="myCanvas"></canvas>

<script>
    var n=800;
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
        ctx.arc(100,70,50,0,2*Math.PI);
    ctx.strokeStyle="white";
    ctx.stroke();
</script>

</body>
</html> 

<DOCTYPE html>
<html lang="en">
    <head>
        <style>
         #myCanvas{background-color:orange;
              border: 2px solid black;
              width:800px;
              heigh:400px;}
     </style>
    </head>
<body>
        <canvas id="myCanvas"></canvas>

<script>
    var n=800;
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
        ctx.arc(100,70,50,0,2*Math.PI);
    ctx.strokeStyle="white";
    ctx.fillStyle="red";
    ctx.shadowOffsetX="20";
    ctx.shadowOffsetY="20";
    ctx.shadowColor="black";
    ctx.shadowBlur="20";
    ctx.fill();
    ctx.stroke();
</script>

</body>
</html>



 <DOCTYPE html>
<html lang="en">
    <head>
        <style>
         #myCanvas{background-color:orange;
              border: 2px solid black;
              width:800px;
              heigh:400px;}
     </style>
    </head>
<body>
        <canvas id="myCanvas"></canvas>
<script>
    var n=800;
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
        ctx.arc(100,70,50,0,2*Math.PI);
    ctx.strokeStyle="white";
    ctx.fillStyle="red";
    ctx.fill();
    ctx.stroke();
</script>
</body>
</html>





Linear gradient
var grd = context.createLinearGradient(x1, y1, x2, y2);
grd.addColorStop(0, 'red');  
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();
Radial gradient
var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();
Pattern
var imageObj = new Image();
imageObj.onload = function() {
  var pattern = context.createPattern(imageObj, 'repeat');
  context.fillStyle = pattern;
  context.fill();
};
imageObj.src = 'path/to/my/image.jpg';
Line Join
context.lineJoin = 'miter|round|bevel';
Line Cap
context.lineCap = 'butt|round|square';

Alpha (Opacity)
context.globalAlpha = 0.5; // between 0 and 1
·         Color Formats
String
context.fillStyle = 'red';
Hex Long
context.fillStyle = '#ff0000';
Hex Short
context.fillStyle = '#f00';
RGB
context.fillStyle = 'rgb(255,0,0)';
RGBA
context.fillStyle = 'rgba(255,0,0,1)';
·         Paths
Begin Path
context.beginPath();
Line
context.lineTo(x, y);

Close Path
context.closePath();
 
Quadratic curve
context.quadraticCurveTo(cx, cy, x, y);
Bezier curve
context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);



·         Images
Draw Image with default size
var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, x, y);
};
imageObj.src = 'path/to/my/image.jpg';


·         Text
Fill Text
context.font = '40px Arial';
context.fillStyle = 'red';
context.fillText('Hello World!', x, y);
Stroke Text
context.font = '40pt Arial';
context.strokeStyle = 'red';
context.strokeText('Hello World!', x, y);
Bold Text
context.font = 'bold 40px Arial';
Italic Text
context.font = 'italic 40px Arial';
Text Align
context.textAlign = 'start|end|left|center|right';
Text Baseline
context.textBaseline = 'top|hanging|middle|alphabetic|ideographic
|bottom';
Get Text Width
var width = context.measureText('Hello world').width;
·         Transforms
Translate
context.translate(x, y);
Scale
context.scale(x, y);
Rotate
context.rotate(radians);
Flip Horizontally
context.scale(-1, 1);
Flip Vertically
context.scale(1, -1);
Custom Transform
context.transform(a, b, c, d ,e, f);
Set Transform
context.setTransform(a, b, c, d ,e, f);
Shear
context.transform(1, sy, sx, 1, 0, 0);
Reset
context.setTransform(1, 0, 0, 1, 0, 0);
·   

Popular Posts

Follow by Email