caeb92 · April 7, 2020 19:21
diff --git a/canvas.html b/canvas.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>DRAW</title>

  <!-- Styles -->
  <style>
    body {
      margin: 0;
      font-family: 'Poppins', sans-serif !important;
      background-color: #EEEEEE;
    }

    .card {
      height: 60vh !important;
      cursor: crosshair;
      /*
        Or use a custom image for the cursor
        cursor: url('img/pen.svg') 0 22, auto;
      */
    }
  </style>
 </head>

 <body>
  <div class="container">
    <h3 class="mt-3 mb-4">Draw canvas 👀</h3>

    <div class="row">
      <!-- DRAW -->
      <div class="col-xs-12 col-sm-12 col-md-10">
        <div class="w-100 card shadow" id="drawCard">
          <canvas id="draw"></canvas>
        </div>
      </div>

      <!-- SETTINGS -->
      <div class="col-xs-12 col-sm-12 col-md-2">
        <p>Settings</p>

        <small>Color</small>
        <div class="input-group flex-nowrap mt-2 mb-3">
          <input id="colorPalette" type="color" class="form-control" placeholder="Color" aria-label="Color"
            aria-describedby="addon-wrapping">
        </div>

        <small>Stroke width</small>
        <span id="strokeValue" name="strokeValue">0</span>
        <div class="input-group flex-nowrap mt-2 mb-4">
          <input type="range" min="1" max="24" value="3" class="form-control-range" id="strokeWidth">
        </div>

        <p>Canvas</p>
        <button type="button" class="btn btn-outline-primary w-100" onclick="clearCanvas()">
          Clear draw
        </button>
      </div>

    </div>

  </div>


  <script>
    const canvas = document.getElementById('draw');
    const ctx = canvas.getContext('2d');

    const drawCard = document.getElementById('drawCard');
    const colorPalette = document.getElementById('colorPalette');
    const strokeWidth = document.getElementById('strokeWidth');
    const strokeValue = document.getElementById('strokeValue').innerHTML = strokeWidth.value; // Set initial value on HTML

    canvas.width = drawCard.clientWidth;
    canvas.height = drawCard.clientHeight;

    ctx.lineJoin = 'miter';
    ctx.lineCap = 'round';
    ctx.strokeStyle = colorPalette.value;
    ctx.lineWidth = strokeWidth.value;

    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

    function draw(e) {
      if (!isDrawing) return;
      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      [lastX, lastY] = [e.offsetX, e.offsetY];
    }

    canvas.addEventListener('mousedown', (e) => {
      isDrawing = true;
      [lastX, lastY] = [e.offsetX, e.offsetY];
    });

    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', () => isDrawing = false);
    canvas.addEventListener('mouseout', () => isDrawing = false);

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

    // Settings
    colorPalette.addEventListener('input', () => {
      ctx.strokeStyle = colorPalette.value;
    });

    strokeWidth.addEventListener('input', () => {
      const value = strokeWidth.value;
      ctx.lineWidth = value;
      document.getElementById('strokeValue').innerHTML = value;
    });
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
	integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<title>DRAW</title>

	<!-- Styles -->
	<style>
	body {
	margin: 0;
	font-family: 'Poppins', sans-serif !important;
	background-color: #EEEEEE;
	}

	.card {
	height: 60vh !important;
	cursor: crosshair;
	/*
	Or use a custom image for the cursor
	cursor: url('img/pen.svg') 0 22, auto;
	*/
	}
	</style>
	</head>

	<body>
	<div class="container">
	<h3 class="mt-3 mb-4">Draw canvas 👀</h3>

	<div class="row">
	<!-- DRAW -->
	<div class="col-xs-12 col-sm-12 col-md-10">
	<div class="w-100 card shadow" id="drawCard">
	<canvas id="draw"></canvas>
	</div>
	</div>

	<!-- SETTINGS -->
	<div class="col-xs-12 col-sm-12 col-md-2">
	<p>Settings</p>

	<small>Color</small>
	<div class="input-group flex-nowrap mt-2 mb-3">
	<input id="colorPalette" type="color" class="form-control" placeholder="Color" aria-label="Color"
	aria-describedby="addon-wrapping">
	</div>

	<small>Stroke width</small>
	<span id="strokeValue" name="strokeValue">0</span>
	<div class="input-group flex-nowrap mt-2 mb-4">
	<input type="range" min="1" max="24" value="3" class="form-control-range" id="strokeWidth">
	</div>

	<p>Canvas</p>
	<button type="button" class="btn btn-outline-primary w-100" onclick="clearCanvas()">
	Clear draw
	</button>
	</div>

	</div>

	</div>


	<script>
	const canvas = document.getElementById('draw');
	const ctx = canvas.getContext('2d');

	const drawCard = document.getElementById('drawCard');
	const colorPalette = document.getElementById('colorPalette');
	const strokeWidth = document.getElementById('strokeWidth');
	const strokeValue = document.getElementById('strokeValue').innerHTML = strokeWidth.value; // Set initial value on HTML

	canvas.width = drawCard.clientWidth;
	canvas.height = drawCard.clientHeight;

	ctx.lineJoin = 'miter';
	ctx.lineCap = 'round';
	ctx.strokeStyle = colorPalette.value;
	ctx.lineWidth = strokeWidth.value;

	let isDrawing = false;
	let lastX = 0;
	let lastY = 0;

	function draw(e) {
	if (!isDrawing) return;
	ctx.beginPath();
	ctx.moveTo(lastX, lastY);
	ctx.lineTo(e.offsetX, e.offsetY);
	ctx.stroke();
	[lastX, lastY] = [e.offsetX, e.offsetY];
	}

	canvas.addEventListener('mousedown', (e) => {
	isDrawing = true;
	[lastX, lastY] = [e.offsetX, e.offsetY];
	});

	canvas.addEventListener('mousemove', draw);
	canvas.addEventListener('mouseup', () => isDrawing = false);
	canvas.addEventListener('mouseout', () => isDrawing = false);

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

	// Settings
	colorPalette.addEventListener('input', () => {
	ctx.strokeStyle = colorPalette.value;
	});

	strokeWidth.addEventListener('input', () => {
	const value = strokeWidth.value;
	ctx.lineWidth = value;
	document.getElementById('strokeValue').innerHTML = value;
	});
	</script>
	</body>

	</html>