HTML5 Game - Set the global composite operation context.globalCompositeOperation = source-atop

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Composite Operations

Description

Set the global composite operation context.globalCompositeOperation = source-atop

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transforms</title>

  <style>
canvas {/*from ww w. j  av a2  s .  com*/
  border: 1px dashed black;
}
  </style>

  <script>
window.onload = function() {
  let canvas = document.getElementById("drawingCanvas");
  let context = canvas.getContext("2d");

  // Draw a rectangle.
  context.fillStyle = "blue";
  context.fillRect(15,15,70,70);

  context.globalCompositeOperation = "source-atop";
    
  // Draw a circle overtop.
  context.fillStyle = "red";
  context.beginPath();
  context.arc(75, 75, 35, 0, Math.PI*2, true);
  context.fill();
};

  </script>
</head>

<body>
  <canvas id="drawingCanvas" width="300" height="200"></canvas>
</body>
</html>

Related Topic