ujihisa/prototype.html

## prototype.html
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="prototype.js"></script>
</head>

<body>
  <div>
    <canvas id="canvas-display" width="400" height="400" style="border: solid 1px"></canvas>
  </div>
  <br/>
  <ul id="colors">
  </ul>
  <br style="clear:both;"/>
  <br style="clear:both;"/>
  <div id="control-buttons">
    <div style="float:left;">
      <button id="clear" href="#">Reset</button>
      <button id="export" href="#">Save as Image</button>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function(){
      $('#canvas-display').paintBrush();
    });
  </script>
</body>

## prototype.js
(function($) {
  $.fn.paintBrush = function(options) {
    var settings = {
      'targetID': 'canvas-display'
    },

      $this = $(this),
      o = {},
      ui = {},

      core = {
        init: function(options) {
          ui.$loadParentDiv = o.targetID;
          core.draw();
          // core.controls();
          //core.toggleScripts();
        },

        canvasInit: function() {
          context = document.getElementById("canvas-display").getContext("2d");
          context.lineCap = "round";
          //Fill it with white background
          context.save();
          context.fillStyle = '#fff';
          context.fillRect(0, 0, context.canvas.width, context.canvas.height);
          context.restore();
        },

        saveActions: function() {
          var imgData = document.getElementById("canvas-display").toDataURL("image/png");
          undoHistory.push(imgData);

        },

        undoDraw: function() {
          if (undoHistory.length > 0) {
            var undoImg = new Image();
            $(undoImg).load(function() {
              var context = document.getElementById("canvas-display").getContext("2d");
              context.drawImage(undoImg, 0, 0);
            });
            undoImg.src = undoHistory.pop();
          }
        },

        draw: function() {
          var undoHistory = [];
          var history = [];
          var history_i = 0;
          const history_size = 1000;

          var cntxt, top, left, draw, draw = 0;
          const canvas = document.getElementById("canvas-display");
          cntxt = canvas.getContext("2d");
          top = $('#canvas-display').offset().top;
          left = $('#canvas-display').offset().left;
          core.canvasInit();

          const drawLine = ([prevX, prevY], [x, y]) => {
            cntxt.beginPath();
            cntxt.moveTo(prevX, prevY);
            cntxt.lineTo(x, y);
            cntxt.strokeStyle = "black";
            cntxt.lineWidth = 5;
            cntxt.stroke();
          }

          const removeLine = ([prevX, prevY], [x, y]) => {
            cntxt.beginPath();
            cntxt.moveTo(prevX, prevY);
            cntxt.lineTo(x, y);
            cntxt.strokeStyle = "white";
            cntxt.lineWidth = 6;
            cntxt.stroke();
          }

          //Drawing Code
          $('#canvas-display').mousemove(function(e) {
            const [x, y] = [e.pageX - left + 1, e.pageY - top + 1];
            const prev = history[(history_i - 1) % history_size];
            if (prev)
              drawLine(prev, [x, y]);

            if (history[history_i % history_size]) {
              removeLine(
                history[(history_i) % history_size],
                history[(history_i + 1) % history_size]);
            }
            history[history_i % history_size] = [x, y];
            history_i += 1;
          });

        },

        // controls: function() {
        //   canvas = document.getElementById("canvas-display");
        //   cntxt = canvas.getContext("2d");
        //   $('#export').click(function(e) {
        //     e.preventDefault();
        //     window.open(canvas.toDataURL(), 'Canvas Export', 'height=400,width=400');
        //   });
        //
        //   $('#clear').on("click", "a.offsite", function(e) {
        //     e.preventDefault();
        //     canvas.width = canvas.width;
        //     canvas.height = canvas.height;
        //     core.canvasInit();
        //     $('#colors li:first').click();
        //     //core.toggleScripts();
        //   });
        //
        //   $('#colors li').on("click", "a.offsite", function(e) {
        //     e.preventDefault();
        //     $('#colors li').removeClass('selected');
        //     $(this).addClass('selected');
        //     cntxt.strokeStyle = $(this).css('background-color');
        //     core.toggleScripts();
        //   });
        //
        //   //Init the brush and color
        //   $('#colors li:first').click();
        //
        //   $('#controls').on("click", "a.offsite", function() {
        //     core.toggleScripts();
        //   });
        // },

        toggleScripts: function() {
          $('#colors').slideToggle(400);
          $('#control-buttons').toggle(400);
        }
      };

    $.extend(true, o, settings, options);

    core.init();

  };
})(jQuery);
	<head>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="prototype.js"></script>
	</head>

	<body>
	<div>
	<canvas id="canvas-display" width="400" height="400" style="border: solid 1px"></canvas>
	</div>
	<br/>
	<ul id="colors">
	</ul>
	<br style="clear:both;"/>
	<br style="clear:both;"/>
	<div id="control-buttons">
	<div style="float:left;">
	<button id="clear" href="#">Reset</button>
	<button id="export" href="#">Save as Image</button>
	</div>
	</div>

	<script type="text/javascript">
	$(document).ready(function(){
	$('#canvas-display').paintBrush();
	});
	</script>
	</body>
	(function($) {
	$.fn.paintBrush = function(options) {
	var settings = {
	'targetID': 'canvas-display'
	},

	$this = $(this),
	o = {},
	ui = {},

	core = {
	init: function(options) {
	ui.$loadParentDiv = o.targetID;
	core.draw();
	// core.controls();
	//core.toggleScripts();
	},

	canvasInit: function() {
	context = document.getElementById("canvas-display").getContext("2d");
	context.lineCap = "round";
	//Fill it with white background
	context.save();
	context.fillStyle = '#fff';
	context.fillRect(0, 0, context.canvas.width, context.canvas.height);
	context.restore();
	},

	saveActions: function() {
	var imgData = document.getElementById("canvas-display").toDataURL("image/png");
	undoHistory.push(imgData);

	},

	undoDraw: function() {
	if (undoHistory.length > 0) {
	var undoImg = new Image();
	$(undoImg).load(function() {
	var context = document.getElementById("canvas-display").getContext("2d");
	context.drawImage(undoImg, 0, 0);
	});
	undoImg.src = undoHistory.pop();
	}
	},

	draw: function() {
	var undoHistory = [];
	var history = [];
	var history_i = 0;
	const history_size = 1000;

	var cntxt, top, left, draw, draw = 0;
	const canvas = document.getElementById("canvas-display");
	cntxt = canvas.getContext("2d");
	top = $('#canvas-display').offset().top;
	left = $('#canvas-display').offset().left;
	core.canvasInit();

	const drawLine = ([prevX, prevY], [x, y]) => {
	cntxt.beginPath();
	cntxt.moveTo(prevX, prevY);
	cntxt.lineTo(x, y);
	cntxt.strokeStyle = "black";
	cntxt.lineWidth = 5;
	cntxt.stroke();
	}

	const removeLine = ([prevX, prevY], [x, y]) => {
	cntxt.beginPath();
	cntxt.moveTo(prevX, prevY);
	cntxt.lineTo(x, y);
	cntxt.strokeStyle = "white";
	cntxt.lineWidth = 6;
	cntxt.stroke();
	}

	//Drawing Code
	$('#canvas-display').mousemove(function(e) {
	const [x, y] = [e.pageX - left + 1, e.pageY - top + 1];
	const prev = history[(history_i - 1) % history_size];
	if (prev)
	drawLine(prev, [x, y]);

	if (history[history_i % history_size]) {
	removeLine(
	history[(history_i) % history_size],
	history[(history_i + 1) % history_size]);
	}
	history[history_i % history_size] = [x, y];
	history_i += 1;
	});

	},

	// controls: function() {
	// canvas = document.getElementById("canvas-display");
	// cntxt = canvas.getContext("2d");
	// $('#export').click(function(e) {
	// e.preventDefault();
	// window.open(canvas.toDataURL(), 'Canvas Export', 'height=400,width=400');
	// });
	//
	// $('#clear').on("click", "a.offsite", function(e) {
	// e.preventDefault();
	// canvas.width = canvas.width;
	// canvas.height = canvas.height;
	// core.canvasInit();
	// $('#colors li:first').click();
	// //core.toggleScripts();
	// });
	//
	// $('#colors li').on("click", "a.offsite", function(e) {
	// e.preventDefault();
	// $('#colors li').removeClass('selected');
	// $(this).addClass('selected');
	// cntxt.strokeStyle = $(this).css('background-color');
	// core.toggleScripts();
	// });
	//
	// //Init the brush and color
	// $('#colors li:first').click();
	//
	// $('#controls').on("click", "a.offsite", function() {
	// core.toggleScripts();
	// });
	// },

	toggleScripts: function() {
	$('#colors').slideToggle(400);
	$('#control-buttons').toggle(400);
	}
	};

	$.extend(true, o, settings, options);

	core.init();

	};
	})(jQuery);