Responsive canvas in bootstrap

I am trying to make a responsive canvas. All my tests were running with a 600x600 canvas and with that height and width it works fine and draws every line correctly. The problem is, I've tried this:

 #myCanvas {
    background-color: #ffffff;
    border:1px solid #000000;
    min-height: 600px;
    height: 100%;
    width: 100%;
 }

      

Write-only myCanvas is inside sm-col-8.

And it looks nice on my laptop and looks nice on my phone, but (because of my draw () function because he was thinking of a square), the draw starts more like in the lower left corner (near) and it should start at right corner.

So, I don't want to change my draw () function, but what I'm looking for is to redraw the canvas size. I mean: if I'm on a laptop / tablet .. with a 600x600 resolution, show it at that size, but if I'm on my phone that has 384x640, is it roughly 300x300? I don't know if this might be a good solution.

My drawing function:

function drawLines(lines,i,table,xtotal,ytotal){

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

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

    var xIni;
    var xFin;
    var yIni;
    var yFin;

    xIni = (c.width*parseInt(lines[i][1])/xtotal);
    yIni = (c.height*parseInt(lines[i][2])/ytotal);
    xFin = (c.width*parseInt(lines[i][3])/xtotal);
    yFin = (c.height*parseInt(lines[i][4])/ytotal);

    ctx.beginPath();
    ctx.moveTo(xIni,c.height-yIni);
    ctx.lineTo(xFin,c.height-yFin);
    ctx.lineWidth=4;

    ctx.strokeStyle = colorAleatorio();

    ctx.stroke();

}

      

+3


source to share


2 answers


With Bootstrap use:



<canvas id="canvas" class='img-responsive' style="border: 1px solid black;"></canvas>

      

+5


source


You can make your html Canvas responsive with the command context.scale

.

The .scale command will scale the internal coordinate system used by the canvas.



This means you don't need to change any of your own drawing coordinates, because canvas will automatically convert your coordinates to scaled canvas coordinates for you.

// save the original width,height used in drawLines()
var origWidth=600;
var origHeight=600;
var scale=1.00;


// reference to canvas and context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


// call this after resizing
// send in the new maximum width,height desired
function resizeAndRedraw(newMaxWidth,newMaxHeight){

    // calc the global scaling factor that fits into the new size
    // and also maintains the original aspect ratio
    scale=Math.min((newMaxWidth/origWidth),(newMaxHeight/origHeight))

    // resize the canvas while maintaining correct aspect ratio
    canvas.width=origWidth*scale;
    canvas.height=origHeight*scale;

    // Note: changing the canvas element width or height will
    // erase the canvas so you must reissue all your drawing commands        
    drawLines(lines,i,table,xtotal,ytotal);

}


// call drawLines 
function drawLines(lines,i,table,xtotal,ytotal){

    // scale the canvas coordinate system to the current scale
    // Note: This scales the coordinates used internally
    // by canvas. It does not resize the canvas element
    ctx.scale(s,s);

    // now do your drawing commands
    // You do not need to adjust your drawing coordinates because
    // the Canvas will do that for you
    var xIni;
    var xFin;
    var yIni;
    var yFin;

    xIni = (c.width*parseInt(lines[i][1])/xtotal);
    yIni = (c.height*parseInt(lines[i][2])/ytotal);
    xFin = (c.width*parseInt(lines[i][3])/xtotal);
    yFin = (c.height*parseInt(lines[i][4])/ytotal);

    ctx.beginPath();
    ctx.moveTo(xIni,c.height-yIni);
    ctx.lineTo(xFin,c.height-yFin);
    ctx.lineWidth=4;

    ctx.strokeStyle = colorAleatorio();

    ctx.stroke();

    // restore the context to it unscaled state
    ctx.scale(-s,-s);

}

      

+2


source







All Articles