How do you put text to the right or left of a canvas element?

user_14720237 0
Viewed 68

I am trying to add text to the right and left of the canvas (black grid) shown in this picture, but no matter what I try it seems to put the text above or below it.

<div id="inputs">
    <input id='slider' type="range" min=2 max=100 step=1>
    Rows: <span id="choice"></span>

    <input id='slider2' type="range" min=0 max=70 step = 0.5>
    Percent of nodes to be walls: <span id="choice2"></span>

    <input type="checkbox" id='Show Path' checked=true>Show Path

    <input type="button" value="Clear Board" onclick="setup();">

    <a href="controls.html" style="margin-left:30px">Controls</a>
  </div>
  <br>
  <canvas id="canvas" width="700" height="700"></canvas>

enter image description here

html javascript
2 Answers

Not sure how much content you would like to add on the left/right of the canvas element but I would suggest something like:

<div class="container">
    <div>Left text....</div>
    <canvas id="canvas" width="700" height="700"></canvas>
    <div>Right text....</div>
</div>

With the following CSS:

.container {display: flex; flex-direction: "row"; }
user_30591800

Just needed to add some more css to make it within a line.

EDIT:

The revised snippet can now be run, with the new inline-block-centered class applied to the canvas and surrounding text.

(The canvas border is just to make the canvas visible in the snippet.)

/* This ruleset is just for the snippet. (IRL, reset to 700px) */
#canvas { width: 200px; height: 200px; border: 1px solid grey; }

/* This crucial ruleset puts the selected elements inline together */
.inline-block-centered { display: inline-block; vertical-align: middle; }

/* These rulesets are optional replacements for forced formatting in HTML */
#inputs { margin-bottom: 1em; }
#inputs > a { margin-left: 30px; }
<div id="inputs">
    <input id='slider' type="range" min=2 max=100 step=1>
    Rows: <span id="choice"></span>

    <input id='slider2' type="range" min=0 max=70 step = 0.5>
    Percent of nodes to be walls: <span id="choice2"></span>

    <input type="checkbox" id='Show Path' checked=true>Show Path

    <input type="button" value="Clear Board" onclick="setup();">

    <a href="controls.html">Controls</a>
</div>

<div class="inline-block-centered">
    <span>Left text</span>
</div>

<canvas id="canvas" class="inline-block-centered"></canvas>

<div class="inline-block-centered">
    <span>Right text</span>
</div>

user_147202370
Related