Malen

by Vloxxity

HTML

<canvas id="canvas" width="400" height="300" style="border:1px #000 solid;"></canvas>

JavaScript

document.onselectstart = function(){ return false; };
var x = 0;
var y = 0;
function draw(x,y,w,r,g,b,a){
    ctx.lineWidth = w;
    ctx.lineTo(x, y);
    ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    ctx.stroke()
   
};
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = 10;
var radius = w/2;
var going = false;
$('canvas').mousedown(function(){
    going = true;
    ctx.beginPath();
});
$('canvas').mouseup(function(){
    going = false;
    ctx.closePath();
});
$('canvas').mousemove(function(e){
    if(going == true){
        x = e.pageX;
        y = e.pageY;
        draw(x,y,w+5,100,0,0,0.1);
        draw(x,y,w,100,0,0,1);
    };
});