Init.

scripts/main.js

@@ -0,0 +1,44 @@
+var pointer = new Pointer();
+var canvas = document.getElementById('myCanvas');
+var context = canvas.getContext('2d');
+
+function writeMessage(canvas, message) {
+  var context = canvas.getContext('2d');
+  // context.clearRect(0, 0, canvas.width, canvas.height);
+  context.font = '12pt Calibri';
+  context.fillStyle = 'black';
+  context.fillText(message, 10, 25);
+}
+
+function getMousePos(canvas, evt)
+{
+  var rect = canvas.getBoundingClientRect();
+  return new Position(evt.clientX - rect.left,evt.clientY - rect.top);
+}
+
+canvas.addEventListener('mousemove', function(evt) {
+  pointer.position = getMousePos(canvas, evt);
+  pointer.draw();
+  // var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
+  // writeMessage(canvas, message);
+  // draw_pixel(context,mousePos.x,mousePos.y);
+}, false);
+
+canvas.addEventListener('mousedown', function(evt) {
+  pointer.can_draw = true;
+}, false);
+
+canvas.addEventListener('mouseup', function(evt) {
+  pointer.can_draw = false;
+}, false);
+
+function draw_pixel(context,x,y)
+{
+  var id = context.createImageData(1,1);
+  var d  = id.data;
+  d[0]   = 0;
+  d[1]   = 0;
+  d[2]   = 0;
+  d[3]   = 255;
+  context.putImageData(id,x,y);
+}

scripts/pointer.js

@@ -0,0 +1,18 @@
+function Pointer()
+{
+  this.position = new Position();
+  this.can_draw = false;
+  
+  this.draw = function()
+  {
+    if(this.can_draw === false){return;}
+    
+    var id = context.createImageData(1,1);
+    var d  = id.data;
+    d[0]   = 0;
+    d[1]   = 0;
+    d[2]   = 0;
+    d[3]   = 255;
+    context.putImageData(id,this.position.x,this.position.y);
+  }
+}

scripts/position.js

@@ -0,0 +1,5 @@
+function Position(x = 0,y = 0)
+{
+  this.x = x;
+  this.y = y;
+}