Draw smooth dashed sine wave with vanilla js and canvas drawing, for trail-like UI element

gistfile1.txt

//	$('.js-trail-canvas').drawTrail()


var checkTrails = function() {
	$('.js-trail').remove();

	ImagesLoaded(document.querySelector('.with-trail'), function() {
		$('.js-trail-container').each(function() {
			var $container = $(this);

			var w = $container.width(), h = $container.height();
			if (w == 0 || h == 0) return;

			var $canvas = $('<canvas></canvas>')
			.addClass('js-trail')
			.prop({
	            width: w,
	            height: h
	        });
			$container.append($canvas)

			var ctx = $canvas[0].getContext("2d");

			ctx.imageSmoothingEnabled = true;
			ctx.lineWidth = 5;
			ctx.setLineDash([10]);
			ctx.strokeStyle = '#C7CBDC';

			var ppts = [];
			var i;

			for(i=0; i<=h; i+=1){
				x = ( Math.sin(i / (h / 12)) * (h / 40) ) + (w / 2 );
				y = i;
				ppts.push({x: x, y: y});
			}

			ctx.beginPath();
			ctx.moveTo(ppts[0].x, ppts[0].y);

			for (i=1; i < ppts.length - 2; i++) {
				var c = (ppts[i].x + ppts[i + 1].x) / 2;
				var d = (ppts[i].y + ppts[i + 1].y) / 2;

				ctx.lineTo(ppts[i].x, ppts[i].y);
			}

			ctx.quadraticCurveTo(
				ppts[i].x,
				ppts[i].y,
				ppts[i + 1].x,
				ppts[i + 1].y
			);

			ctx.stroke();
		});
	});
}

var throttled = throttle(checkTrails, 500);
$(window).resize(throttled);
checkTrails();