JSFiddle - React, Tailwind, and code Playground

by ashwyn

HTML

<html>

<body>
  <p><label>Drawing tool: <select id="dtool">
    <option value="line">Line</option>
    <option value="rect">Rectangle</option>
    <option value="pencil">Pencil</option>
  </select></label></p>
  <div id="container">
    <canvas id="imageView" width="200" height="150"></canvas>
    <canvas id="imageShow" width="200" height="150"></canvas>
    <a href="javascript:void(0)" onclick="cloneCanvas()">Copy</a>
  </div>

    <script type="text/javascript">
        function cloneCanvas() {
    var newCanvas = document.getElementById("imageShow");
    //var newCanvas = document.createElement("canvas");
    var context = newCanvas.getContext("2d");

    var img = document.getElementById("imageView");
    context.drawImage(img, 0, 0);
    
    return newCanvas;
}



// Keep everything in anonymous function, called on window load.
if(window.addEventListener) {
window.addEventListener('load', function () {
  var canvas, context, canvaso, contexto;

  // The active tool instance.
  var tool;
  var tool_default = 'line';

  function init () {
    // Find the canvas element.
    canvaso = document.getElementById('imageView');
    if (!canvaso) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvaso.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

    // Get the 2D canvas context.
    contexto = canvaso.getContext('2d');
    if (!contexto) {
      alert('Error: failed to getContext!');
      return;
    }

    // Add the temporary canvas.
    var container = canvaso.parentNode;
    canvas = document.createElement('canvas');
    if (!canvas) {
      alert('Error: I cannot create a new canvas element!');
      return;
    }

    canvas.id     = 'imageTemp';
    canvas.width  = canvaso.width;
    canvas.height = canvaso.height;
    container.appendChild(canvas);

    //Event if Drawn
    $("#imageTemp").click(function(){
       alert("asdada");
    });
        
    context =...

CSS

#container { position:relative}
#imageView { border:1px solid #000}
#imageTemp { position:absolute; top:1px; left:1px}