CODEWITHSUNDEEP
htmlcanvas
Phoeniyx
Phoeniyx

Reputation: 572

HTML5 canvas position and color

I am experimenting with the HTML5 canvas. The drawing operations seem to be going ok so far. But, I can't seem to figure out how to "move" the canvas itself to the right. It looks like currently the canvas top is defaulting to (0, 0). How can I locate the canvas locate to (200, 0) lets say. For example, I may want to display the drawing buttons/tools on the left pane (much like Windows paint), and have the drawgrid to the right.

I am still very new to the world of front-end development, so appreciate the help. My feeling is that this should be specified in the styles.css I have - but not sure what to put there. Thx.

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Canvas test</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>

<section id="main">
    <canvas id="canvas" width="1600" height="900">
        Requires modern browser.
    </canvas>
</section>

<!-- START JAVASCRIPT -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/drawtest.js"></script>
    <script>
        $(document).ready(function() {
            DrawGrid.initialize();
        });
    </script>

<!-- END JAVASCRIPT -->

</body>
</html>

Upvotes: 0

Views: 93

Answers (1)

V. Rubinetti
V. Rubinetti

Reputation: 1696

The element, like any HTML element, can be sized and position with its CSS style. So if you're talking about the canvas's location on the page itself, refer to general CSS positioning. http://www.barelyfitz.com/screencast/html-training/css/positioning/

If you're talking about moving the "view" inside the canvas itself to apply drawing operations in different locations, use context.translate(-200,0); for example. http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/

Upvotes: 1

Related Questions