Why is my code working on jsfiddle but not my HTML file

StackOverflow https://stackoverflow.com//questions/24037009

Question

I am using jsfiddle to store some coordinates. The coordinates gets displayed on jsfiddle but when I copy it on my local files the coordinates don't get displayed. I would like to display the coordinates of that line on my local files, How can this be done?

This is my HTML file

<canvas id="canvas" width="300" height="300" style="border: 1px solid black;">     </canvas>  
<div id="coord"></div>  
<div id="coords"></div>

This is my Javascript File

var canvas = document.getElementById('canvas'),  
coord = document.getElementById('coord'),
ctx = canvas.getContext('2d'), // get 2D context
imgCat = new Image(),
arr = [];

imgCat.src = ''http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png';
imgCat.onload = function() { // wait for image load
ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
}; 

var mousedown = false;
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 5;
canvas.onmousedown = function(e) {
arr = [];
var pos = fixPosition(e, canvas);
mousedown = true;
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
return false;
};

canvas.onmousemove = function(e) {
var pos = fixPosition(e, canvas);
coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
if (mousedown) {
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
arr.push([pos.x, pos.y])  
}
};
canvas.onmouseup = function(e) {
mousedown = false;
$('#coords').html(JSON.stringify(arr, null, 2));
};

function fixPosition(e, gCanvasElement) {
var x;
var y;
if (e.pageX || e.pageY) { 
x = e.pageX;
y = e.pageY;
}
else { 
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
return {x: x, y:y};
}

Demo Here

Was it helpful?

Solution

Copy this in a html page. The probleme was your link imgCat.src = ''http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png'; You put two ''

<html>
<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>  
<div id="coord"></div>  
<div id="coords"></div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js</script> 
</html>

<script type="text/javascript">
var canvas = document.getElementById('canvas'),  
coord = document.getElementById('coord'),
ctx = canvas.getContext('2d'), // get 2D context
imgCat = new Image(),
arr = [];

imgCat.src ='http://www.clipartbest.com/cliparts/bTy/E5x/bTyE5xLjc.png';
imgCat.onload = function() { // wait for image load
ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
}; 

var mousedown = false;
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 5;
canvas.onmousedown = function(e) {
arr = [];
var pos = fixPosition(e, canvas);
mousedown = true;
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
return false;
};

canvas.onmousemove = function(e) {
var pos = fixPosition(e, canvas);
coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
if (mousedown) {
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
arr.push([pos.x, pos.y])  
}
};
canvas.onmouseup = function(e) {
mousedown = false;
$('#coords').html(JSON.stringify(arr, null, 2));
};

function fixPosition(e, gCanvasElement) {
var x;
var y;
if (e.pageX || e.pageY) { 
x = e.pageX;
y = e.pageY;
}
else { 
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
return {x: x, y:y};
}
</script>

OTHER TIPS

some configuration is applying to jsfiddle automatically and you need to apply them by your hands.

first you need to add jQuery to you site. Add this line between <head> </head> tags:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

second you need to check that you script executes for example when page loads. you need to put you code into this:

$(function() {
// You script here
});

or put it just before </body> tag

so in output you jquery code will be like this:

<script>
$(function() {
var canvas = document.getElementById('canvas'),  
coord = document.getElementById('coord'),
ctx = canvas.getContext('2d'), // get 2D context
imgCat = new Image(),
arr = [];

imgCat.src = ''http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png';
imgCat.onload = function() { // wait for image load
ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
}; 

var mousedown = false;
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 5;
canvas.onmousedown = function(e) {
arr = [];
var pos = fixPosition(e, canvas);
mousedown = true;
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
return false;
};

canvas.onmousemove = function(e) {
var pos = fixPosition(e, canvas);
coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
if (mousedown) {
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
arr.push([pos.x, pos.y])  
}
};
canvas.onmouseup = function(e) {
mousedown = false;
$('#coords').html(JSON.stringify(arr, null, 2));
};

function fixPosition(e, gCanvasElement) {
var x;
var y;
if (e.pageX || e.pageY) { 
x = e.pageX;
y = e.pageY;
}
else { 
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
return {x: x, y:y};
}
});
</script>

1.Check the doc type of the HTML :should be html for (HTML 5)or no doc type

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.Make sure your scripts are getting loaded properly. Check the path of Jquery script. --Externally downloaded scripts need to be unblocked (Righ Click -> Properties -> (General Tab)'Unblock' Option on bottom) (Right Click -> Properties -> (general Tab) -> Advanced -> Uncheck Encrypt option if checked.)

3.Put your code inside a function. (Specifically the binding related codes.) Other functions need to be defined outside document ready.(Already done) And Call that function inside document ready.

$(document).ready(function () {
  DrawImage();
});

function DrawImage()
{
  //your code here
  var canvas = document.getElementById('canvas'),
    coord = document.getElementById('coord'),
    ctx = canvas.getContext('2d'), // get 2D context
    imgCat = new Image(),
    arr = [];

/*********** draw image *************/
imgCat.src = 'http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png';
imgCat.onload = function() { // wait for image load
    ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
};

/*********** handle mouse events on canvas **************/
var mousedown = false;
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 5;
canvas.onmousedown = function(e) {
    arr = [];
    var pos = fixPosition(e, canvas);
    mousedown = true;
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
    return false;
};

canvas.onmousemove = function(e) {
    var pos = fixPosition(e, canvas);
    coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
    if (mousedown) {
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
        arr.push([pos.x, pos.y])
    }
};

canvas.onmouseup = function(e) {
    mousedown = false;
    $('#coords').html(JSON.stringify(arr, null, 2));
};

}

//Utils
function fixPosition(e, gCanvasElement) {
  //put codes of this function here.
}

just add your script before end of body tag and your problem will solve.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top