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

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

Please check whether you need to add any dependent files like jQuery plugin. — prava, Jun 04 '14 at 12:07
Did you look at all the duplicates you where presented with when asking this. They are still visible on the right side of this page. The issue is DOM ready events etc. — adeneo, Jun 04 '14 at 12:08
check jQuery plugin version in jsFiddle its 1.6. 2 also check that your html content type supports canvas tag — Rohan Patil, Jun 04 '14 at 12:09
Welcome to Stack Overflow! Look in the [JavaScript error console](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820) and tell what errors you see there and which lines they point to. — JJJ, Jun 04 '14 at 12:09

dpfauwadel · Accepted Answer · 2014-06-05T10:01:18.200

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>

Could you please explain for me what was wrong with imgCat.src because I have tried copying this code but it didn't work — user3706227, Jun 04 '14 at 19:51
The link you provide is not working. Try with anither link like this one [http://www.clipartbest.com/cliparts/bTy/E5x/bTyE5xLjc.png](http://www.clipartbest.com/cliparts/bTy/E5x/bTyE5xLjc.png) — dpfauwadel, Jun 05 '14 at 07:52
And you should keep the file in local, to avoid this sort of problem, or to ensure that the link will always be available — dpfauwadel, Jun 05 '14 at 08:06
I just changed the link, I still can't see the coordinates like in the jsfiddle — user3706227, Jun 05 '14 at 09:03
In which browser do you open your html file. I open it with chrome and it work. In IE be sure that the browser don't block the js. It's a security parameter — dpfauwadel, Jun 05 '14 at 10:00
I open in chrome too. There must be something I am missing then. I will figure something out. Thank you! — user3706227, Jun 05 '14 at 11:07

score 2 · Answer 2 · answered Jun 04 '14 at 12:22

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>

So am I missing a jquery file ? o – user3706227 Jun 04 '14 at 19:53 — user3706227, Jun 04 '14 at 19:53

score 2 · Answer 3 · answered Jun 04 '14 at 12:32

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.
}

score 0 · Answer 4 · answered Jun 04 '14 at 12:37

0

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

answered Jun 04 '14 at 12:37

Rahul J. Rane

246
1
8

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

4 Answers4