Canvas Composites

Canvas Shadow, Canvas Global Alpha, Canvas Clipping Region, Canvas Global Composite Operations.

Canvas Shadow



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.rect(188, 40, 200, 100);
      context.fillStyle = 'pink';
      context.shadowColor = '#999';
      context.shadowBlur = 10;
      context.shadowOffsetX = 12;
      context.shadowOffsetY = 12;
      context.fill();
    </script>
  </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

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

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

context.rect(188, 40, 200, 100);

context.fillStyle = 'pink';

context.shadowColor = '#999';

context.shadowBlur = 10;

context.shadowOffsetX = 12;

context.shadowOffsetY = 12;

context.fill();

</script>

</body>

</html>

Result

Canvas Global Alpha



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // pink rectangle
      context.beginPath();
      context.rect(100, 30, 200, 200);
      context.fillStyle = 'pink';
      context.fill();

      // draw transparent red circle
      context.globalAlpha = 0.5;
      context.beginPath();
      context.arc(200, 100, 100, 0, 2 * Math.PI, false);
      context.fillStyle = 'blue';
      context.fill();
    </script>
  </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

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

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

// pink rectangle

context.beginPath();

context.rect(100, 30, 200, 200);

context.fillStyle = 'pink';

context.fill();

// draw transparent red circle

context.globalAlpha = 0.5;

context.beginPath();

context.arc(200, 100, 100, 0, 2 * Math.PI, false);

context.fillStyle = 'blue';

context.fill();

</script>

</body>

</html>

Result

Canvas Clipping Region



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 90;
      var offset = 60;

      /*
       * save() allows us to save the canvas context before
       * defining the clipping region so that we can return
       * to the default state later on
       */
      context.save();
      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.clip();

      // draw pink circle inside clipping region
      context.beginPath();
      context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'pink';
      context.fill();

      // draw blue circle inside clipping region
      context.beginPath();
      context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'blue';
      context.fill();

      // draw green circle inside clipping region
      context.beginPath();
      context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();

      /*
       * restore() restores the canvas context to its original state
       * before we defined the clipping region
       */
      context.restore();
      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 10;
      context.strokeStyle = 'pink';
      context.stroke();
    </script>
  </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

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

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

var x = canvas.width / 2;

var y = canvas.height / 2;

var radius = 90;

var offset = 60;

* save() allows us to save the canvas context before

* defining the clipping region so that we can return

* to the default state later on

context.save();

context.beginPath();

context.arc(x, y, radius, 0, 2 * Math.PI, false);

context.clip();

// draw pink circle inside clipping region

context.beginPath();

context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'pink';

context.fill();

// draw blue circle inside clipping region

context.beginPath();

context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'blue';

context.fill();

// draw green circle inside clipping region

context.beginPath();

context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'green';

context.fill();

* restore() restores the canvas context to its original state

* before we defined the clipping region

context.restore();

context.beginPath();

context.arc(x, y, radius, 0, 2 * Math.PI, false);

context.lineWidth = 10;

context.strokeStyle = 'pink';

context.stroke();

</script>

</body>

</html>

Result

Canvas Global Composite Operations



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      } 
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="430"></canvas>
    <canvas id="tempCanvas" width="578" height="430" style="display:none;"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var tempCanvas = document.getElementById('tempCanvas');
      var tempContext = tempCanvas.getContext('2d');

      var squareWidth = 50;
      var circleRadius = 30;
      var shapeOffset = 45;
      var operationOffset = 145;
      var arr = [];

      arr.push('source-atop');
      arr.push('source-in');
      arr.push('source-out');
      arr.push('source-over');
      arr.push('destination-atop');
      arr.push('destination-in');
      arr.push('destination-out');
      arr.push('destination-over');
      arr.push('lighter');
      arr.push('darker');
      arr.push('xor');
      arr.push('copy');

      // translate context to add 10px padding
      context.translate(10, 10);

      // draw each of the operations
      for(var n = 0; n < arr.length; n++) {
        var thisOperation = arr[n];

        tempContext.save();
        
        // clear temp context
        tempContext.clearRect(0, 0, canvas.width, canvas.height);

        // draw rectangle (destination)
        tempContext.beginPath();
        tempContext.rect(0, 0, squareWidth, squareWidth);
        tempContext.fillStyle = 'pink';
        tempContext.fill();

        // set global composite
        tempContext.globalCompositeOperation = thisOperation;

        // draw circle (source)
        tempContext.beginPath();
        tempContext.arc(shapeOffset, shapeOffset, circleRadius, 0, 2 * Math.PI, false);
        tempContext.fillStyle = 'gray';
        tempContext.fill();
        tempContext.restore();

        // draw text
        tempContext.font = '10pt Verdana';
        tempContext.fillStyle = 'black';
        tempContext.fillText(thisOperation, 0, squareWidth + 45);

        // translate visible context so operation is drawn in the right place
        if(n > 0) {
          if(n % 4 === 0) {
            context.translate(operationOffset * -3, operationOffset);
          }
          else {
            context.translate(operationOffset, 0);
          }
        }

        // copy drawing from tempCanvas onto visible canvas
        context.drawImage(tempCanvas, 0, 0);
      }
    </script>
  </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

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

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

var tempCanvas = document.getElementById('tempCanvas');

var tempContext = tempCanvas.getContext('2d');

var squareWidth = 50;

var circleRadius = 30;

var shapeOffset = 45;

var operationOffset = 145;

var arr = [];

arr.push('source-atop');

arr.push('source-in');

arr.push('source-out');

arr.push('source-over');

arr.push('destination-atop');

arr.push('destination-in');

arr.push('destination-out');

arr.push('destination-over');

arr.push('lighter');

arr.push('darker');

arr.push('xor');

arr.push('copy');

// translate context to add 10px padding

context.translate(10, 10);

// draw each of the operations

for(var n = 0; n < arr.length; n++) {

var thisOperation = arr[n];

tempContext.save();

// clear temp context

tempContext.clearRect(0, 0, canvas.width, canvas.height);

// draw rectangle (destination)

tempContext.beginPath();

tempContext.rect(0, 0, squareWidth, squareWidth);

tempContext.fillStyle = 'pink';

tempContext.fill();

// set global composite

tempContext.globalCompositeOperation = thisOperation;

// draw circle (source)

tempContext.beginPath();

tempContext.arc(shapeOffset, shapeOffset, circleRadius, 0, 2 * Math.PI, false);

tempContext.fillStyle = 'gray';

tempContext.fill();

tempContext.restore();

// draw text

tempContext.font = '10pt Verdana';

tempContext.fillStyle = 'black';

tempContext.fillText(thisOperation, 0, squareWidth + 45);

// translate visible context so operation is drawn in the right place

if(n > 0) {

if(n % 4 === 0) {

context.translate(operationOffset * -3, operationOffset);

}

else {

context.translate(operationOffset, 0);

}

// copy drawing from tempCanvas onto visible canvas

context.drawImage(tempCanvas, 0, 0);

}

</script>

</body>

</html>

Result

WeAnswer

See author's posts

Tags: Canvas Composites

Canvas Shadow

Result

Canvas Global Alpha

Result

Canvas Clipping Region

Result

Canvas Global Composite Operations

Result

WeAnswer

Amazing html canvas examples

html5 capture image from camera

Canvas Element

How to set EC2 Ubuntu default password

CPU & Memory usage in PHP

Install PHP mcrypt extension on Ubuntu

How to reset or change the MySQL root password?

Canvas Shadow

Result

Canvas Global Alpha

Result

Canvas Clipping Region

Result

Canvas Global Composite Operations

Result

Leave a Reply Cancel reply

More Stories

You may have missed