HTML Javascript - Position and color of lines on canvas

Question

HTML Javascript - Position and color of lines on canvas

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I'm drawing with canvas but I need that the lines that appear are behind the rectangles and also that each line has its own color

Canvas code

<script>
        //X,Y
        function start () {
            var element = document.querySelector('canvas')
            element.width = window.innerWidth;
            element.height = window.innerHeight;
            var s1 = element.getContext("2d");
            var s2 = element.getContext("2d");
            var s3 = element.getContext("2d");
            var s4 = element.getContext("2d");
            s1.fillRect(110,110,100,100);
            s2.fillRect(220,300,100,100);
            s3.fillRect(400,200,100,100);
            s4.fillRect(800,500,100,100);


            s1.beginPath(); 
            s1.moveTo(250,330);
            s1.strokeStyle = "Gray";
            s1.lineWidth = 3;
            s1.lineTo(120,120);
            s1.strokeStyle = "blue";
            s1.lineTo(440,250);
            s1.stroke();

            s2.beginPath();
            s2.lineWidth = 2;
            s2.moveTo(850,550);
            s2.strokeStyle = "green"; 
            s2.lineTo(240,330);
            s2.strokeStyle = "green"; 
            s2.lineTo(450,250);
            s2.stroke();

        }

        window.addEventListener("load",start, false);
    </script>

javascript html canvas

asked by Ernesto Emmanuel Yah Lopez 02.03.2018 в 14:38

source

2 answers

1

I do not understand your problem very well, why not just draw the rectangles afterwards? Very different things are strokeStyle and fillStyle, one is the color of the lines and the other the fill color, in any case if you want to keep the color say strokeStyle you can use the save () and restore () functions.

<script>
    function start () {
        var element = document.querySelector('canvas')
        element.width = window.innerWidth;
        element.height = window.innerHeight;
        var s1 = element.getContext("2d");

        s1.beginPath(); 
        s1.moveTo(250,330);
        s1.strokeStyle = "Gray";
        s1.lineWidth = 3;
        s1.lineTo(120,120);
        s1.strokeStyle = "blue";
        s1.lineTo(440,250);
        s1.stroke();

        s1.beginPath();
        s1.lineWidth = 2;
        s1.moveTo(850,550);
        s1.strokeStyle = "green"; 
        s1.lineTo(240,330);
        s1.strokeStyle = "green"; 
        s1.lineTo(450,250);
        s1.stroke();

        s1.fillRect(110,110,100,100);
        s1.fillRect(220,300,100,100);
        s1.fillRect(400,200,100,100);
        s1.fillRect(800,500,100,100);
    }

    window.addEventListener("load",start, false);
</script>

Example using save () and restore ()

See the code save and restore by Jesus Tepec ( @JesusTepec ) on CodePen .

Codepen

answered by 02.03.2018 в 17:49

Problem mysqli PHP: Access denied for user 'root' @ 'localhost' (using password: YES) error with MySQL: Invalid parameter number: number of bound variables does not match number of tokens

score 2 · Accepted Answer

There is a context property that allows you to define how to add elements: CanvasRenderingContext2D.globalCompositeOperation

Indicating contexto.globalCompositeOperation='destination-over'; , you have the new figures placed behind of the existing ones:

function start () {
    var element = document.querySelector('canvas')
    element.width = 1000;
    element.height = 1000;
    var s1 = element.getContext("2d");

    s1.fillRect(110,110,100,100);
    s1.fillRect(220,300,100,100);
    s1.fillRect(400,200,100,100);
    s1.fillRect(800,500,100,100);
//a partir de aquí, todo lo que añadamos estará "detrás"
    s1.globalCompositeOperation='destination-over';

    s1.beginPath(); 
    s1.moveTo(250,330);
    s1.strokeStyle = "Gray";
    s1.lineWidth = 3;
    s1.lineTo(120,120);
    s1.strokeStyle = "blue";
    s1.lineTo(440,250);
    s1.stroke();

    s1.beginPath();
    s1.lineWidth = 2;
    s1.moveTo(850,550);
    s1.strokeStyle = "green"; 
    s1.lineTo(240,330);
    s1.strokeStyle = "green"; 
    s1.lineTo(450,250);
    s1.stroke();

}

window.addEventListener("load",start, false);

canvas {
  width: 400px;
  height: 400px;
}

<canvas></canvas>