Canvas How to - Extend a line before and after original endpoints

Question

We would like to know how to extend a line before and after original endpoints.

Answer


<!-- w  w  w . j av  a  2 s . c o m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#canvas {
  border: 1px solid red;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var original1 = {
    x: 100,
    y: 120
};
var original2 = {
    x: 200,
    y: 150
};
var before = getLineXY(original1, original2, -.2);
var after = getLineXY(original1, original2, 1.2);
draw();
function draw() {
    ctx.beginPath();
    ctx.moveTo(before.x, before.y);
    ctx.lineTo(after.x, after.y);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(original1.x, original1.y, 3, 0, Math.PI * 2, false);
    ctx.arc(original2.x, original2.y, 3, 0, Math.PI * 2, false);
    ctx.fill();
}
function getLineXY(startPt, endPt, extent) {
    var dx = endPt.x - startPt.x;
    var dy = endPt.y - startPt.y;
    var X = startPt.x + dx * extent;
    var Y = startPt.y + dy * extent;
    return ({
        x: X,
        y: Y
    });
}
}//]]>  
</script>
</head>
<body>
  <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

The code above is rendered as follows: