Automatically resize Html5 canvas with respect to the screen resolution

Question

I have created an HTML5 canvas game which involves dragging and selecting objects(words) from two canvases. The screen also has two buttons. But unfortunately my program is hard coded in terms of selecting words as I have entered the co-ordinates where the words are drawn on canvas. My screen resolution is 1366 x768. Now whenever the resolution is changed, the buttons move somewhere else and the mouse never selects the dragged words rather some words else above it. I am in a big trouble now, please help !!

<html>
<head>
    <title>Word Search</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type = text/css href="style.css">
    <script type="text/javascript" src="keywords.js"></script>
    <script type="text/javascript" src="game.js"></script>
    <script type="text/javascript" src="highlight.js"></script>
    <script type="text/javascript" src="grid.js"></script>
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>
    <h1 id="heading">Find Keywords</h1>
    <h3 id="results">Drag through the lettered Squares..!</h3>
    <canvas id ='canvas1' height = 450 width="450" style= "border :1px solid black"> </canvas>
    <canvas id ='canvas2' height = 450 width="250" style= "border :1px solid black"></canvas>
    <input type='button' value="HIGHLIGHT ALL" id="button1" onclick="highlight();" />
    <input type='button' value="NEXT" id="button2" onclick="next();"/>


        <script> 
        var words =[];
        window.onload = function(){ 
                            begin();
                                  };

        function begin()
        {
            wordSearchPuzzle();
        }

        function wordSearchPuzzle()
        { 
        words.length=0;              
        words = getwords(8);
        var puz =wordfind(words);
        game(words,puz);   
        }

        function next()
         {

        var canvas = document.getElementById("canvas1");
        var ctx1 = canvas.getContext("2d");
        var canvas2 = document.getElementById("canvas2");
        var ctx2 = canvas2.getContext("2d");
        ctx1.clearRect(0, 0, canvas.width, canvas.height);
        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
        wordSearchPuzzle();

        }


        </script>

</body>
</html>

Answer 1

This is possible, I have done it int he past with a canvas that would be dynamically sized based on the screen size.

If I remember correctly i did something like this.

I placed the canvas in a div, and gave the div a dynamic width, something like style="width: 30%"

I placed the canvas inside this div and tied css to give the canvas a style="width: 100%"

<div style="width:30%">
   <canvas id="can" style="width:100%"></canvas>
</div>

I tied into the window resized event and read the client size to determine the element width and height to change the canvas

window.resize = function(){
    var canvas = document.getElementById("can");
    canvas.width = canvas.clientWidth;
    canvas.height = //some value based on width
}

You then need to redraw your canvas as resizing will clear the canvas of all content

Automatically resize Html5 canvas with respect to the screen resolution

Question

1 answers

solution1
0 2014-06-11 19:27:50

Automatically resize Html5 canvas with respect to the screen resolution

Question

1 answers

solution1 0 2014-06-11 19:27:50

solution1
0 2014-06-11 19:27:50