HTML5 Game - Create a simple drawing board

Description

Create a simple drawing board
Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Paint</title>
  <script>
let canvas;//from   ww w  .  j a  v a2s  .c om
let context;

window.onload = function() {
  // Get the canvas and the drawing context.
  canvas = document.getElementById("drawingCanvas");
  context = canvas.getContext("2d");

  // Attach the events that you need for drawing.
  canvas.onmousedown = startDrawing;
  canvas.onmouseup = stopDrawing;
  canvas.onmouseout = stopDrawing;
  canvas.onmousemove = draw;
};

let isDrawing = false;

function startDrawing(e) {
  // Start drawing.
  isDrawing = true;

  // Create a new path (with the current stroke color and stroke thickness).
  context.beginPath();

  // Put the pen down where the mouse is positioned.
  context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}

function stopDrawing() {
  isDrawing = false;
}

function draw(e) {
  if (isDrawing == true) {
    // Find the new position of the mouse.
    let x = e.pageX - canvas.offsetLeft;
    let y = e.pageY - canvas.offsetTop;

    // Draw a line to the new position.
    context.lineTo(x, y);
    context.stroke();  
  }
}

// Keep track of the previous clicked <img> element for color.
let previousColorElement;

function changeColor(color, imgElement) {
  // Change the current drawing color.
  context.strokeStyle = color;

  // Give the newly clicked <img> element a new style.
  imgElement.className = "Selected";

  // Return the previously clicked <img> element to its normal state.
  if (previousColorElement != null) previousColorElement.className = "";
  previousColorElement = imgElement;
}

// Keep track of the previous clicked <img> element for thickness.
let previousThicknessElement;

function changeThickness(thickness, imgElement) {
  // Change the current drawing thickness.
  context.lineWidth = thickness;

  // Give the newly clicked <img> element a new style.
  imgElement.className = "Selected";

  // Return the previously clicked <img> element to its normal state.
  if (previousThicknessElement != null) previousThicknessElement.className = "";
  previousThicknessElement = imgElement;
}


function clearCanvas() {
  context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveCanvas() { 
  // Find the <img> element.
  let imageCopy = document.getElementById("savedImageCopy");

  // Show the canvas data in the image.
  imageCopy.src = canvas.toDataURL();  

  // Unhide the <div> that holds the <img>, so the picture is now visible.
  let imageContainer = document.getElementById("savedCopyContainer");
  imageContainer.style.display = "block";
}

    </script>
</head>

<body>
  <div class="Toolbar">
    - Pen Color -<br>
    <button id="redPen" onclick="changeColor('rgb(212,21,29)', this)">click red</button>
    <button id="greenPen" onclick="changeColor('rgb(131,190,61)', this)">green</button>
    <button id="bluePen" onclick="changeColor('rgb(0,86,166)', this)">blue</button>
  </div>
  <div class="Toolbar">
    - Pen Thickness -<br>
    <button onclick="changeThickness(1, this)">thin</button>
    <button onclick="changeThickness(5, this)">medium</button>
    <button onclick="changeThickness(10, this)">thick</button>
  </div>
  <div class="CanvasContainer">
    <canvas id="drawingCanvas" width="500" height="300"></canvas>
  </div>
  <div class="Toolbar">
    - Operations -<br>
    <button onclick="saveCanvas()">Save the Canvas</button>
    <button onclick="clearCanvas()">Clear the Canvas</button>
    <div id="savedCopyContainer">
      <img id="savedImageCopy"><br>
      Right-click to save ...
    </div>
  </div>
</body>
</html>
HTML5 Game - Create a simple drawing board

Description

Demo

Related Topic
