Why is my drawing acting weird?

Hi there, I know this question is a few months old at this point, and your CodePen link looks like you solved the issue. But just in case anyone else is still having this problem, here's how I solved it.

The problem may be if you are resizing the canvas in CSS, or inline in the HTML. The canvas html element is set to a default size (300px x 150px), and if you try to re-size it using CSS it only scales the element based on the default size. That means if you make it larger than the default size your offset values will change, and the line may look pixelated or otherwise weird. You can instead change the actual .height and .width properties of the element using jQuery. And it even provided a neat opportunity to add a "resize" input field to the document that can easily be set up to interact with the document.

First, I created a function:

function setCanvasSize(h, w) {
        var h= $('#canvasHeight').val(); 
        var w = $('#canvasWidth').val();
        $canvas[0].height = $('#canvasHeight').val(); 
        $canvas[0].width = $('#canvasWidth').val();
        }

Then I just created a click event that triggers when the button with the id "#submitSize" is pressed by calling the function:

$('#submitSize').click(function() { 
        setCanvasSize();
        })

It's probably apparent from the above code, but for the HTML I just created text inputs with the id's "canvasHeight" and "canvasWidth". Hope that helps anyone else who was struggling with this!