CODEWITHSUNDEEP
javascripthtmlcanvas
Alan Mc
Alan Mc

Reputation: 7

HTML Canvas Functions from Select Option

I am trying to create a a simple html page that displays a canvas with a background as a college map. There is a dropdown list and the user can select a room they are trying to get too and lines will be displayed on the canvas depending on which room is selected.

I am trying to call these different lines depending on the selection but am struggling to find why this is not working

<!DOCTYPE HTML>
<html>
<head>
<div>
<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url(pretendcollege.jpg) }
  </style>
<canvas id="c4" width="580" height = "580" ></canvas>
<div>

  <select   name="rooms" onchange="path(this.value)">
  <option value="">Please select</option>
  <option value="B223">B223</option>
  <option value="C174">C174</option>
  <option value="B170">B170</option>
</select>

</div> 
</div>

<script>
var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");

function path(v) {
  switch(v) {
    case "B220":
    c4_context.beginPath();
    c4_context.moveTo(295, 473);
    c4_context.lineTo(295, 286);
    c4_context.lineTo(94, 286);
    c4_context.strokeStyle = "Red";
    c4_context.stroke();
  break;
case "C174":
  c4_context.beginPath();
    c4_context.moveTo(295, 473);
    c4_context.lineTo(295, 82);
    c4_context.lineTo(118, 82);
    c4_context.strokeStyle = "Blue";
    c4_context.stroke();
  break;
}
}
</script>
</html>

Upvotes: 0

Views: 1762

Answers (1)

rufism
rufism

Reputation: 392

Your issues may be coming from when you call your JS. You want to grab the canvas tag and it's context after you create it in your html, yet you want to put the entire script before you call the path() function. Here is working code:

=== EDITED ===

yourHtmlFile.html

<!DOCTYPE HTML>
<html>
    <body>
       <div>
           <canvas id="c4" width="580" height="580" ></canvas>
            <select name="rooms" onchange="path(this.value)">
                <option value="">Please select</option>
                <option value="B223">B223</option>
                <option value="C174">C174</option>
                <option value="B170">B170</option>
            </select>
       </div> 
       <script src="yourOtherScript.js"></script>
    </body>
</html>

yourOtherScript.js

var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");

function path(v) {
    switch(v) {
        case "B220":
            c4_context.beginPath();
            c4_context.moveTo(295, 473);
            c4_context.lineTo(295, 286);
            c4_context.lineTo(94, 286);
            c4_context.stroke();
            break;
        case "C174":
            c4_context.beginPath();
            c4_context.moveTo(295, 473);
            c4_context.lineTo(295, 82);
            c4_context.lineTo(118, 82);
            c4_context.stroke();
            break;
    }
}

Check out my fiddle here

Upvotes: 1

Related Questions