Smoothing a line and creating a gradient - html5-canvas

Question

I'm making this for a class and I have managed to create a drawing app in which the stroke reacts to the speed of the mouse and the colour of the stroke changes depending on the angle.
Link here.
It looks really rough though, and I'd like to understand how I could smoothen the lines by connecting the strokes (so it would appear like a single stroke that is changing width) and if it would be possible to create a gradient, going from red to green. I tried to get some help from the teacher but we have approximately 10 minutes a week dedicated to getting individual assistance for our projects and it's quite hard to ask all these question and understand what is happening in the code...
Please note that I had a lot of help doing this. I previously did something similar using paper.js, but my teacher prefers me to use "pure" canvas for this. I have a background in webdesign, but it's far from programming, I just know markup language and working with html and css, occasionally using some jquery slider. So I'm entirely confused by even the simplest tutorials, I tried to follow this but I don't even understand WHERE to put everything and it just didn't work.
I'd be really glad if someone could give me some help with this... ELI5, please. I'm a fast learner but I'm still in confusion mode, overwhelmed by all these lines of code I don't (yet) understand, but would really like to.
Thank you in advance!

Answer 1

Several hints:
Set context.lineCap='round'. This rounds the beginning & end of each line. That rounding helps visually merge one line into the next line.
Limit your lineWidth to a small range. This makes your line visually flow better because there isn't a huge jump in size when the user makes rapid speed changes.
Here's refactored code and a Demo:
// cache a reference to the canvas element & its context
// because they are used often
var canvas=$('#canvas')[0];
var context = canvas.getContext('2d');
//full-screen
canvas.width = 500;
canvas.height = 500;
// style lines with rounded end-caps & rounded joins
context.lineJoin='round';
context.lineCap='round';
var mouseX = undefined;
var mouseY = undefined;
var mouseIsDown = false;
var PI2=Math.PI*2;
var speed=-1000;
(function(){Math.clamp=function(a,b,c){return Math.max(b,Math.min(c,a));}})();
onMouseDown = function( event ){
// tell the browser we're handling this event
event.preventDefault();
event.stopPropagation();
mouseIsDown = true;
}
onMouseMove = function( event ){
// tell the browser we're handling this event
event.preventDefault();
event.stopPropagation();
var previousMouseX = mouseX;
var previousMouseY = mouseY;
mouseX = event.pageX;
mouseY = event.pageY;
var dx = Math.abs( mouseX - previousMouseX );
var dy = Math.abs( mouseY - previousMouseY );
var speed = Math.sqrt( dx * dx + dy * dy );
// limit the min/max width of the line
speed=Math.clamp(speed,2,12);
var angle = 2 * Math.PI * Math.acos( dx / ( speed + 0.00001 ) );
if( angle < Math.PI ){
context.strokeStyle = 'rgb( 0, 255, 0 )';
}
else{
context.strokeStyle = 'rgb( 255, 0, 0 )';
}
if( mouseIsDown ){
context.lineWidth=speed;
context.beginPath();
context.moveTo( previousMouseX, previousMouseY );
context.lineTo( mouseX, mouseY );
context.stroke();
}
}
//drawing only is the mouse is down
onMouseUp = function( event ){
// tell the browser we're handling this event
event.preventDefault();
event.stopPropagation();
mouseIsDown = false;
}
$( '#canvas' ).on( 'mousedown', onMouseDown );
$( '#canvas' ).on( 'mousemove', onMouseMove );
$( '#canvas' ).on( 'mouseup', onMouseUp );
$( '#canvas' ).on( 'mouseout', onMouseUp );
canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="canvas" width=500 height=500></canvas>
Applying a gradient is much harder. You will have to:
Save each mouse point
Interpolate points between each mouse point so that each new point is 1px distant from the previous.
Clear the canvas
Redraw a line between each mouse point with each line's strokeStyle changing according to your desired gradient.