How do I insert Bézier curves into an open image on a canvas?

I need to draw some Bézier curves on an image I select to be displayed on a canvas, but I don't know how to do that. I have to select a curve in my select and the same should be inserted into the image. I would also be able to drag the curve into the image and change the position of the control points. To whom you can help me, I thank you.

<!DOCTYPE html>

<html>

<body>

<input type="image" name="selectImage" src="{{ asset('img/open.png') }}" 

onClick="openImageSelection()"><br>



<select id="curvesId" style="width: 80%; color:black">

    <option selected>Select</option>

    <option onclick="curve1()">Curve 1</option>

    <option onclick="curve2()">Curve 2</option>

    <option onclick="curve3()">Curve 3</option>

</select>



<canvas id="myCanvas"></canvas>



<script>



var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");



function openImageSelection() {

    window.open("{{ route('image.index') }}", "_blank", "width=600, 

    height=400");

}



function openImage(path, loadFunction) {

    img = new Image();

    image_url = path;

    let ctx = document.getElementById('image');

    ctx.setAttribute("onmousedown", "bezier_coordinate(event)");

    if (ctx.getContext) {

        ctx = ctx.getContext('2d');

        ctx.canvas.width = window.innerWidth;

        ctx.canvas.height = 785;

        img.onload = function () {

            ctx.drawImage(img, 0, 0, 1050, 785);    //draw background image

            ctx.fillStyle = "rgba(1, 1, 1, 0)"; //draw a box over the top

            if (loadFunction) {

                loadFunction();

            }

        };

    }

    img.src = path;

}



function bezier_coordinate(event) {

    const selectedIndex = document.getElementById("curvesId").selectedIndex;

    const currentCurve = 

    document.getElementById("curvesId").options[selectedIndex].text;

    if (currentCurve === "Selecione") {

        coordenadas(event);

    } else {

        bezier_curve(event, currentCurve);

    }

}



function image(path) {

    global_points = ;

    global_effects = ;

    openImage(path, null);

    reset();

}



function curve1(){

    // Define the points as {x, y}

    let start = { x: 20,    y: 40  };

    let cp1 =   { x: 230,   y: 30  };

    let cp2 =   { x: 150,   y: 80  };

    let end =   { x: 250,   y: 100 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



function curve2(){

    // Define the points as {x, y}

    let start = { x: 50,    y: 20  };

    let cp1 =   { x: 200,   y: 15  };

    let cp2 =   { x: 100,   y: 60  };

    let end =   { x: 250,   y: 100 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



function curve3(){

    // Define the points as {x, y}

    let start = { x: 100,    y: 40  };

    let cp1 =   { x: 230,   y: 60  };

    let cp2 =   { x: 120,   y: 80  };

    let end =   { x: 300,   y: 150 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



</script> 



</body>

</html>

Page for image selection:

<style>

    img {

        height: 100px;

        margin: 5px;

        border: 2px solid #fff;

        cursor: pointer;

    }



img:hover {

    border-color: #EA0404;

}

</style>



@foreach ($images as $image)

    <img src="{{ asset('radiografias/'.$image->path) }}" title="{{'Radiografia '.$image->id}}">

@endforeach



<script>

    var imgs = document.querySelectorAll("img");



    for (var x = 0; x < imgs.length; x++) {

        imgs[x].addEventListener("click", function () {

            window.opener.image(this.src); 

            window.close();

        });

    }

</script>

edited Nov 23 at 0:19

asked Nov 22 at 22:36

Abel Galvão

Hi and welcome to Stack Overflow. Please review "How to create a Minimal, Complete, and Verifiable example and other topics under "asking" in the help center. I would then suggest writing some code for the bezier_coordinate function,and getting that to work on a blank canvas, asking for further help if needed, before proceeding with images.
– traktor53
Nov 23 at 0:03

Hello and thank you very much. I've added the code of the Bezier_coordinate function.
– Abel Galvão
Nov 23 at 0:21

You appear to be asking "how to edit bezier curves on a radiographic image?" which is much too broad, The added code does not appear tg edit anything. Please cut down the problem to single things we can help with. Also look for existing solutions for similar problems, e.g. using search terms like "canvas curve edit javascript"
– traktor53
Nov 23 at 0:54

PS. As a thought you could also position a transparent canvas for curves on top of an image element and keep them separate during edit. This would, of course, require change to program design.
– traktor53
Nov 23 at 2:39

add a comment |

<!DOCTYPE html>

<html>

<body>

<input type="image" name="selectImage" src="{{ asset('img/open.png') }}" 

onClick="openImageSelection()"><br>



<select id="curvesId" style="width: 80%; color:black">

    <option selected>Select</option>

    <option onclick="curve1()">Curve 1</option>

    <option onclick="curve2()">Curve 2</option>

    <option onclick="curve3()">Curve 3</option>

</select>



<canvas id="myCanvas"></canvas>



<script>



var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");



function openImageSelection() {

    window.open("{{ route('image.index') }}", "_blank", "width=600, 

    height=400");

}



function openImage(path, loadFunction) {

    img = new Image();

    image_url = path;

    let ctx = document.getElementById('image');

    ctx.setAttribute("onmousedown", "bezier_coordinate(event)");

    if (ctx.getContext) {

        ctx = ctx.getContext('2d');

        ctx.canvas.width = window.innerWidth;

        ctx.canvas.height = 785;

        img.onload = function () {

            ctx.drawImage(img, 0, 0, 1050, 785);    //draw background image

            ctx.fillStyle = "rgba(1, 1, 1, 0)"; //draw a box over the top

            if (loadFunction) {

                loadFunction();

            }

        };

    }

    img.src = path;

}



function bezier_coordinate(event) {

    const selectedIndex = document.getElementById("curvesId").selectedIndex;

    const currentCurve = 

    document.getElementById("curvesId").options[selectedIndex].text;

    if (currentCurve === "Selecione") {

        coordenadas(event);

    } else {

        bezier_curve(event, currentCurve);

    }

}



function image(path) {

    global_points = ;

    global_effects = ;

    openImage(path, null);

    reset();

}



function curve1(){

    // Define the points as {x, y}

    let start = { x: 20,    y: 40  };

    let cp1 =   { x: 230,   y: 30  };

    let cp2 =   { x: 150,   y: 80  };

    let end =   { x: 250,   y: 100 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



function curve2(){

    // Define the points as {x, y}

    let start = { x: 50,    y: 20  };

    let cp1 =   { x: 200,   y: 15  };

    let cp2 =   { x: 100,   y: 60  };

    let end =   { x: 250,   y: 100 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



function curve3(){

    // Define the points as {x, y}

    let start = { x: 100,    y: 40  };

    let cp1 =   { x: 230,   y: 60  };

    let cp2 =   { x: 120,   y: 80  };

    let end =   { x: 300,   y: 150 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



</script> 



</body>

</html>

Page for image selection:

<style>

    img {

        height: 100px;

        margin: 5px;

        border: 2px solid #fff;

        cursor: pointer;

    }



img:hover {

    border-color: #EA0404;

}

</style>



@foreach ($images as $image)

    <img src="{{ asset('radiografias/'.$image->path) }}" title="{{'Radiografia '.$image->id}}">

@endforeach



<script>

    var imgs = document.querySelectorAll("img");



    for (var x = 0; x < imgs.length; x++) {

        imgs[x].addEventListener("click", function () {

            window.opener.image(this.src); 

            window.close();

        });

    }

</script>

edited Nov 23 at 0:19

asked Nov 22 at 22:36

Abel Galvão

Hi and welcome to Stack Overflow. Please review "How to create a Minimal, Complete, and Verifiable example and other topics under "asking" in the help center. I would then suggest writing some code for the bezier_coordinate function,and getting that to work on a blank canvas, asking for further help if needed, before proceeding with images.
– traktor53
Nov 23 at 0:03

Hello and thank you very much. I've added the code of the Bezier_coordinate function.
– Abel Galvão
Nov 23 at 0:21

You appear to be asking "how to edit bezier curves on a radiographic image?" which is much too broad, The added code does not appear tg edit anything. Please cut down the problem to single things we can help with. Also look for existing solutions for similar problems, e.g. using search terms like "canvas curve edit javascript"
– traktor53
Nov 23 at 0:54

PS. As a thought you could also position a transparent canvas for curves on top of an image element and keep them separate during edit. This would, of course, require change to program design.
– traktor53
Nov 23 at 2:39

add a comment |

<!DOCTYPE html>

<html>

<body>

<input type="image" name="selectImage" src="{{ asset('img/open.png') }}" 

onClick="openImageSelection()"><br>



<select id="curvesId" style="width: 80%; color:black">

    <option selected>Select</option>

    <option onclick="curve1()">Curve 1</option>

    <option onclick="curve2()">Curve 2</option>

    <option onclick="curve3()">Curve 3</option>

</select>



<canvas id="myCanvas"></canvas>



<script>



var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");



function openImageSelection() {

    window.open("{{ route('image.index') }}", "_blank", "width=600, 

    height=400");

}



function openImage(path, loadFunction) {

    img = new Image();

    image_url = path;

    let ctx = document.getElementById('image');

    ctx.setAttribute("onmousedown", "bezier_coordinate(event)");

    if (ctx.getContext) {

        ctx = ctx.getContext('2d');

        ctx.canvas.width = window.innerWidth;

        ctx.canvas.height = 785;

        img.onload = function () {

            ctx.drawImage(img, 0, 0, 1050, 785);    //draw background image

            ctx.fillStyle = "rgba(1, 1, 1, 0)"; //draw a box over the top

            if (loadFunction) {

                loadFunction();

            }

        };

    }

    img.src = path;

}



function bezier_coordinate(event) {

    const selectedIndex = document.getElementById("curvesId").selectedIndex;

    const currentCurve = 

    document.getElementById("curvesId").options[selectedIndex].text;

    if (currentCurve === "Selecione") {

        coordenadas(event);

    } else {

        bezier_curve(event, currentCurve);

    }

}



function image(path) {

    global_points = ;

    global_effects = ;

    openImage(path, null);

    reset();

}



function curve1(){

    // Define the points as {x, y}

    let start = { x: 20,    y: 40  };

    let cp1 =   { x: 230,   y: 30  };

    let cp2 =   { x: 150,   y: 80  };

    let end =   { x: 250,   y: 100 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



function curve2(){

    // Define the points as {x, y}

    let start = { x: 50,    y: 20  };

    let cp1 =   { x: 200,   y: 15  };

    let cp2 =   { x: 100,   y: 60  };

    let end =   { x: 250,   y: 100 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



function curve3(){

    // Define the points as {x, y}

    let start = { x: 100,    y: 40  };

    let cp1 =   { x: 230,   y: 60  };

    let cp2 =   { x: 120,   y: 80  };

    let end =   { x: 300,   y: 150 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



</script> 



</body>

</html>

Page for image selection:

<style>

    img {

        height: 100px;

        margin: 5px;

        border: 2px solid #fff;

        cursor: pointer;

    }



img:hover {

    border-color: #EA0404;

}

</style>



@foreach ($images as $image)

    <img src="{{ asset('radiografias/'.$image->path) }}" title="{{'Radiografia '.$image->id}}">

@endforeach



<script>

    var imgs = document.querySelectorAll("img");



    for (var x = 0; x < imgs.length; x++) {

        imgs[x].addEventListener("click", function () {

            window.opener.image(this.src); 

            window.close();

        });

    }

</script>

edited Nov 23 at 0:19

asked Nov 22 at 22:36

Abel Galvão

<!DOCTYPE html>

<html>

<body>

<input type="image" name="selectImage" src="{{ asset('img/open.png') }}" 

onClick="openImageSelection()"><br>



<select id="curvesId" style="width: 80%; color:black">

    <option selected>Select</option>

    <option onclick="curve1()">Curve 1</option>

    <option onclick="curve2()">Curve 2</option>

    <option onclick="curve3()">Curve 3</option>

</select>



<canvas id="myCanvas"></canvas>



<script>



var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");



function openImageSelection() {

    window.open("{{ route('image.index') }}", "_blank", "width=600, 

    height=400");

}



function openImage(path, loadFunction) {

    img = new Image();

    image_url = path;

    let ctx = document.getElementById('image');

    ctx.setAttribute("onmousedown", "bezier_coordinate(event)");

    if (ctx.getContext) {

        ctx = ctx.getContext('2d');

        ctx.canvas.width = window.innerWidth;

        ctx.canvas.height = 785;

        img.onload = function () {

            ctx.drawImage(img, 0, 0, 1050, 785);    //draw background image

            ctx.fillStyle = "rgba(1, 1, 1, 0)"; //draw a box over the top

            if (loadFunction) {

                loadFunction();

            }

        };

    }

    img.src = path;

}



function bezier_coordinate(event) {

    const selectedIndex = document.getElementById("curvesId").selectedIndex;

    const currentCurve = 

    document.getElementById("curvesId").options[selectedIndex].text;

    if (currentCurve === "Selecione") {

        coordenadas(event);

    } else {

        bezier_curve(event, currentCurve);

    }

}



function image(path) {

    global_points = ;

    global_effects = ;

    openImage(path, null);

    reset();

}



function curve1(){

    // Define the points as {x, y}

    let start = { x: 20,    y: 40  };

    let cp1 =   { x: 230,   y: 30  };

    let cp2 =   { x: 150,   y: 80  };

    let end =   { x: 250,   y: 100 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



function curve2(){

    // Define the points as {x, y}

    let start = { x: 50,    y: 20  };

    let cp1 =   { x: 200,   y: 15  };

    let cp2 =   { x: 100,   y: 60  };

    let end =   { x: 250,   y: 100 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



function curve3(){

    // Define the points as {x, y}

    let start = { x: 100,    y: 40  };

    let cp1 =   { x: 230,   y: 60  };

    let cp2 =   { x: 120,   y: 80  };

    let end =   { x: 300,   y: 150 };



    // Cubic Bézier curve

    ctx.beginPath();

    ctx.moveTo(start.x, start.y);

    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

    ctx.stroke();



    // Start and end points

    ctx.fillStyle = 'blue';

    ctx.beginPath();

    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point

    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point

    ctx.fill();



   // Control points

   ctx.fillStyle = 'red';

   ctx.beginPath();

   ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one

   ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two

   ctx.fill();

}



</script> 



</body>

</html>

Page for image selection:

<style>

    img {

        height: 100px;

        margin: 5px;

        border: 2px solid #fff;

        cursor: pointer;

    }



img:hover {

    border-color: #EA0404;

}

</style>



@foreach ($images as $image)

    <img src="{{ asset('radiografias/'.$image->path) }}" title="{{'Radiografia '.$image->id}}">

@endforeach



<script>

    var imgs = document.querySelectorAll("img");



    for (var x = 0; x < imgs.length; x++) {

        imgs[x].addEventListener("click", function () {

            window.opener.image(this.src); 

            window.close();

        });

    }

</script>

javascript html

edited Nov 23 at 0:19

asked Nov 22 at 22:36

Abel Galvão

edited Nov 23 at 0:19

asked Nov 22 at 22:36

Abel Galvão

edited Nov 23 at 0:19

asked Nov 22 at 22:36

Abel Galvão

asked Nov 22 at 22:36

Abel Galvão

asked Nov 22 at 22:36

Abel Galvão

Hi and welcome to Stack Overflow. Please review "How to create a Minimal, Complete, and Verifiable example and other topics under "asking" in the help center. I would then suggest writing some code for the bezier_coordinate function,and getting that to work on a blank canvas, asking for further help if needed, before proceeding with images.
– traktor53
Nov 23 at 0:03

Hello and thank you very much. I've added the code of the Bezier_coordinate function.
– Abel Galvão
Nov 23 at 0:21

You appear to be asking "how to edit bezier curves on a radiographic image?" which is much too broad, The added code does not appear tg edit anything. Please cut down the problem to single things we can help with. Also look for existing solutions for similar problems, e.g. using search terms like "canvas curve edit javascript"
– traktor53
Nov 23 at 0:54

PS. As a thought you could also position a transparent canvas for curves on top of an image element and keep them separate during edit. This would, of course, require change to program design.
– traktor53
Nov 23 at 2:39

add a comment |

Hi and welcome to Stack Overflow. Please review "How to create a Minimal, Complete, and Verifiable example and other topics under "asking" in the help center. I would then suggest writing some code for the bezier_coordinate function,and getting that to work on a blank canvas, asking for further help if needed, before proceeding with images.
– traktor53
Nov 23 at 0:03

Hello and thank you very much. I've added the code of the Bezier_coordinate function.
– Abel Galvão
Nov 23 at 0:21

You appear to be asking "how to edit bezier curves on a radiographic image?" which is much too broad, The added code does not appear tg edit anything. Please cut down the problem to single things we can help with. Also look for existing solutions for similar problems, e.g. using search terms like "canvas curve edit javascript"
– traktor53
Nov 23 at 0:54

PS. As a thought you could also position a transparent canvas for curves on top of an image element and keep them separate during edit. This would, of course, require change to program design.
– traktor53
Nov 23 at 2:39

Hi and welcome to Stack Overflow. Please review "How to create a Minimal, Complete, and Verifiable example and other topics under "asking" in the help center. I would then suggest writing some code for the bezier_coordinate function,and getting that to work on a blank canvas, asking for further help if needed, before proceeding with images.
– traktor53
Nov 23 at 0:03

Hello and thank you very much. I've added the code of the Bezier_coordinate function.
– Abel Galvão
Nov 23 at 0:21

You appear to be asking "how to edit bezier curves on a radiographic image?" which is much too broad, The added code does not appear tg edit anything. Please cut down the problem to single things we can help with. Also look for existing solutions for similar problems, e.g. using search terms like "canvas curve edit javascript"
– traktor53
Nov 23 at 0:54

PS. As a thought you could also position a transparent canvas for curves on top of an image element and keep them separate during edit. This would, of course, require change to program design.
– traktor53
Nov 23 at 2:39

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438718%2fhow-do-i-insert-b%25c3%25a9zier-curves-into-an-open-image-on-a-canvas%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi