none
Canvas as Background RRS feed

  • Question

  • Hey,

    I dont know how I can set a canvas I made as a Background in a div.

    Thats my HTML:

    <div id="revCounter">
            <div id="rod">
                <div id="anchor">
                </div>
            </div>
    
            <canvas id="canvas" height="240" width="240">your browser is not supporting canvas</canvas>
    
    </div>

    I want to get the canvas as background for the revCounter div

    my JavaScript for the canvas looks like this:

    function draw() {
        var d = degToRad(90);
        var radangle1;
        var radangle2;
        var radiants;
        var degrees = 44;
        var c = document.getElementById("canvas");
        var ctx = c.getContext('2d');
    
        ctx.translate(120, 120)
        ctx.beginPath();
        ctx.strokeStyle = "#ff0000";
        ctx.lineWidth = 5;
        ctx.arc(0, 0, 90, d + degToRad(degrees + 2), d + degToRad(degrees + 274));
        ctx.stroke();
        ctx.beginPath();
        ctx.strokeStyle = "#000000";
        ctx.linewidth = 2;
        ctx.arc(0, 0, 95, d + degToRad(degrees + 2), d + degToRad(degrees + 274));
        ctx.stroke();
        d = degToRad(91);
        /*ctx.beginPath();
        ctx.strokeStyle = "#000000";
        ctx.arc(120, 120, 92, d + degToRad(degrees + 2), d + degToRad(degrees + 273));
        ctx.stroke();*/
    
        d = degToRad(91);
    
        do {
            degrees = degrees + 4;
            radangle1 = degToRad(degrees);
            radangle2 = degToRad(degrees + 23);
            console.log("Vor zeichnen: " + radToDeg(radangle1), radToDeg(radangle2), degrees)
    
            ctx.beginPath();
            ctx.strokeStyle = "#000000";
            ctx.lineWidth = 5;
            ctx.arc(0, 0, 90, d + radangle1, d + radangle2);
            ctx.stroke();
            degrees = radToDeg(radangle2);
    
        } while (degrees >= 45 && degrees <= 290);
    
        //_________________________Text_______________________________
    
        ctx.font = "0.75em Calibri";
        ctx.fillStyle = "#ff0000";
        ctx.fillText("rotations/second", 75, 200);
        ctx.fillStyle = "black";
        ctx.fillText("0", -60, 55);
        ctx.fillText("0.1", -80, 27);
        ctx.fillText("0.2", -80, -10);
        ctx.fillText("0.3", -65, -45);
        ctx.fillText("0.4", -37, -68);
        ctx.fillText("0.5", -7, -73);
        ctx.fillText("0.6", 23, -68);
        ctx.fillText("0.7", 51, -45);
        ctx.fillText("0.8", 67, -10);
        ctx.fillText("0.9", 66, 27);
        ctx.fillText("1.0", 46, 55);
    }

    and my stylesheet:

    #revCounter {
        grid-row: 1/2;
        grid-column: 3/span 2;
        width: 100%;
        padding-left: 3px;
        padding-top: 3px;
        padding-right: 3px;
        padding-bottom: 3px;
    }
    #rod {
        ;
        margin-top: 25%;
        margin-left: 25%;
        width: 5px;
        height: 35%;
        transform-origin: 50% 0%;
        background-color: red;
        z-index: 1;
      }
    #rod #anchor {
        ;
        top: -9px;
        left: -7px;     /*um radius - hälfte der breite der rod*/
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: black;
      }
    
      canvas {
        border: 1px solid grey;
        margin-left: 20%;
    }

    I got a Grid overlay for the hole site cause theres more than just the canvas and the 3 divs

    I would be very pleased if yiu answer fast

    Thanks :)

    Friday, January 17, 2020 2:26 PM

All replies

  • You know that this is a WPF forum.  I would suggest a forum that is for web development.

    Lloyd Sheen

    Friday, January 17, 2020 6:04 PM