HTML5 Game - Adding transparency to drawings

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Transparent

Description

Adding transparency to drawings

Demo

ResultView the demo in separate window 

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

  <style>
canvas {//from  w  w  w  .  j a  v  a 2  s .  c  o m
  border: 1px dashed black;
}
  </style>

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

  context.fillStyle = "rgb(100,150,185)";
  context.lineWidth = 10;
  context.strokeStyle = "red";

  // Draw the circle.
  context.arc(110, 120, 100, 0, 2*Math.PI);
  context.fill();
  context.stroke();

  // Remember to call beginPath() before adding a new shape.
  // Otherwise, the outlines of both shapes will
  // be merged together in an unpredicatable way.
  context.beginPath();

  // Draw the triangle.
  context.moveTo(215,50);
  context.lineTo(15,250);
  context.lineTo(315,250);
  context.closePath();

  // Give it a transparent fill (but keep the solid outline).
  context.fillStyle = "rgba(100,150,185,0.5)";

  context.fill();
  context.stroke();
};

  </script>
</head>

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

Related Topic