pwLLQg

index.html

  	<div id="paint">
  		<canvas id="myCanvas"></canvas>
	</div>

<div class="floatbtn"> 
<a class="btn-floating btn-large waves-effect waves-light blue">
  <i class="material-icons">home</i>
  </a>
</div>

<div class="floatbtnR"> 
  

<a class="btn-floating btn-large waves-effect waves-light blue colorselect-button pulse">
  <i class="material-icons">data_usage</i>
  </a>

</div>

<input class="hiddencolor" type="color">

pwllqg.markdown

pwLLQg

A Pen by Shelikhoo on CodePen.

License.

script.js

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var painting = document.getElementById('paint');
var paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue('width'));
canvas.height = parseInt(paint_style.getPropertyValue('height'));

var mouse = {x: 0, y: 0};
 
canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;
}, false);

ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#000000';
 
canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
 
    canvas.addEventListener('mousemove', onPaint, false);
}, false);
 
canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);
 
var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
};

$(".colorselect-button").click((e)=>{
  $(".colorselect-button").removeClass("pulse");
  $(".hiddencolor").click();
  e.preventDefault();
});

$(".hiddencolor").change((e)=>{
  ctx.strokeStyle=$(".hiddencolor")[0].value;
});

$(".save-button").click((e)=>{
    var result = canvas.toDataURL();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>

style.css

body {
        margin: 0px;
        padding: 0px;

}

canvas,#paint{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  width:100vw;
}

html{
  height: 100%;
}
body {
  min-height: 100%;
}

.floatbtn{
  position:fixed;
  bottom:20px;
  left:20px;
}

.floatbtnR{
  position:fixed;
  bottom:20px;
  right:20px;
}

div.floatbtnR > a {
  margin-left: 10px;
}

.hiddencolor {
  display:none;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />