How to put all this code together in one file?

JavaScript
1

I have a Javascript program working in three different places: http://jsfiddle.net/x5xH5/12/, http://jsfiddle.net/x5xH5/11/, and http://jsfiddle.net/x5xH5/10/. But I don’t know how would I put them in one file. This is where I am at right now: http://jsfiddle.net/x5xH5/13/
So, how would I tell the program to do circle thing in 2nd canvas and line in 3rd canvas??? I haven’t called the changeWidth and changeRadius functions yet, because it’ll just do it in the first canvas making a mess.

2

Hi,

Welcome to the forums.

Do you want to have everything drawn on one canvas element or have the three seperate canvas elements appear on the same page?

3

I have a Javascript program working in three different places, but I don’t know how I could put them in one file.

I have combined your two versions to produce a single canvas with buttons to switch from colour change to shape change.

You can see it all working on JSFiddle :slight_smile:


<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>canvas</title>
<script type="text/javascript" src="../a2014_02/js/jquery-1.7.1.js"></script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; background-color:#CCC; text-align:left; margin:3px 0px; }
#canvas { border:1px solid #000; background-color:#FFF; cursor:pointer;  }
#wrap  { width:500px; height:500px; margin:20px;  }
#butns { margin-top:10px; }
</style>
</head>

<body>

<div id="wrap">
  <h2>Canvas Art Gallery</h2>
  <p>Mouse in and out of the shape to change attributes</p>
  <canvas id="canvas" width="400" height="300"></canvas>
  <div id="butns">
    <input type="button" value="Change colour" onclick="colorChg()" name="b1">&nbsp;&nbsp;
    <input type="button" value="Change size" onclick="sizeChg()" name="b2">
  </div>
</div>

<script type="text/javascript">
var x_coord=150, y_coord=100, w_rect=100, h_rect=100, r=60;
var ctx = document.getElementById("canvas").getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left, offsetY = canvasOffset.top;
var wasInside=false, toggle=0, currentTask=0;
//
function colorChg()
 { var colorMix=["#04B45F","#64247F","#0000FF","#190707","#210B61","#FA58AC","#FFFF00","#F5A9D0"];
   currentTask=0;
   ctx.clearRect(0,0,400,300);
   ctx.fillStyle=colorMix[toggle];
   toggle=(toggle>=7)? 0 : toggle+1;
   ctx.fillRect(x_coord, y_coord, w_rect, h_rect);
}
// --------
function sizeChg()
 { currentTask=1;
   toggle = 0;
   ctx.clearRect(0,0,400,300);
   wasInside = false;
   r = Math.floor((Math.random() * 80) + 20);
   ctx.beginPath();
   ctx.arc(200, 150, r, 0, 2 * Math.PI);
   ctx.stroke();
}
// --------
$canvas.mousemove(function (e){
     var mx = parseInt(e.clientX - offsetX), my = parseInt(e.clientY - offsetY);            // cursor x.y coords
     var isInsideNow = (mx > x_coord) && mx <=(x_coord + w_rect) && (my > y_coord) && my <=(y_coord + h_rect);
     if(isInsideNow && !wasInside)
        { if(currentTask==0){ colorChg(); }
          else {sizeChg(); }
          wasInside = true;
        }
     if (!isInsideNow && wasInside){wasInside = false; }
   });
// ------
//
window.onload=colorChg;
//
</script>

</body>

</html>