Javascript-форум - Не могу разобраться с вызовом функции

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Не могу разобраться с вызовом функции (https://javascript.ru/forum/jquery/30625-ne-mogu-razobratsya-s-vyzovom-funkcii.html)

Не могу разобраться с вызовом функции

Здравствуйте.
Я пишу небольшой генератор картинок на <canvas>.
В самом начале у меня на строке:

var ctx = $('#bart')[0].getContext("2d");

Вылезало: "Uncaught TypeError: Cannot call method 'getContext' of undefined "
После оборачивания в

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

Всё заработало.

Написал я скрип со следующей структурой:

Vars

function draw(text){...}

draw('test')

И всё работало!

Но при попытке сделать кнопочку:

Код:

<input name='test' onclick='draw('bla')' type='button' value='Написать!'>

Вылезло:

Код:

Uncaught ReferenceError: draw is not defined

Я начал пытаться это исправить, но тщетно.
Попытался вернуть всё "как было", но походу не получилось, т.к.
Сейчас на нажатие этой же кнопочки хром реагирует так:

Код:

Uncaught SyntaxError: Unexpected token }

и указывает сюда:

Код:

window.script1344581169582=1;

Гуглил, честно!

onclick="draw('bla')"

Цитата:

Сообщение от Grindel

Всё заработало.

наверно getContext до загрузки вызывали надо или после ready или onload

С getContext я разобрался как раз этим :$(document).ready(function() { ...
});:

Проблема сейчас эта:

Код:

Uncaught SyntaxError: Unexpected token }

Цитата:

Сообщение от Grindel (Сообщение 196139)

Проблема сейчас эта:

Код:

Uncaught SyntaxError: Unexpected token }

приведите код

$(document).ready(function() {

var ctx = $('#bart')[0].getContext("2d");
var sprite = new Image();
var marginTop = 48;
var marginLeft = 0;
var line = '';
var textWidth = 0;
var textCount = 0;
sprite.src = './images/sprite.png';

function draw(text){
	text += ' '; //Добавляю пробел

	ctx.fillStyle = '#fff';
	ctx.textAlign = "left";
	ctx.font = " 18px Flow ";
	textWidth = ctx.measureText(text).width;
	textCount = Math.floor(440/textWidth);
	marginLeft = (500 - textWidth*textCount)/2+3; //КОСТЫЛЬ!!! компенсирую пробел в конце строки!
	marginTop = 48; // Сбрасываю отступ сверху	
	sprite.onload = function() {
		ctx.drawImage(sprite, 0, 0, 500, 310, 0, 0, 500, 310);
		for (var tc = 0; tc < textCount; tc++){
				line += text; // Формирую строку
			};
		for (var i = 0; i < 9; i++) {
			ctx.fillText(line, marginLeft, marginTop);
			marginTop += 18;
		};
		ctx.drawImage(sprite, 498, 128, 80, 180, 406, 118, 80, 180);		
	};
};
draw('test');
})

У Вас неправильная логика
sprite.onload не может быть внутри draw
наоборот из sprite.onload надо draw вызывать

var sprite = new Image();
sprite.onload=function(e){draw('text')};
sprite.src=....
function draw(){ctx.drawImage...}

а потом когда будете кнопкой вызывать картинка уже загружена будет в прелоадер

<input type=button onclick="draw('tratata')">

Цитата:

Сообщение от vadim5june (Сообщение 196163)

sprite.onload=function(e)

А что значит "function(e)"?

Уже, нашёл)

$(document).ready(function() {

var ctx = $('#bart')[0].getContext("2d");
var sprite = new Image();
sprite.src = './images/sprite.png';
sprite.onload=function(e){draw('text')};
var marginTop = 48;
var marginLeft = 0;
var line = '';
var textWidth = 0;
var textCount = 0;

function draw(text){
	text += ' '; //Добавляю пробел

	ctx.fillStyle = '#fff';
	ctx.textAlign = "left";
	ctx.font = " 18px Flow ";
	textWidth = ctx.measureText(text).width;
	textCount = Math.floor(440/textWidth);
	marginLeft = (500 - textWidth*textCount)/2+3; //КОСТЫЛЬ!!! компенсирую пробел в конце строки!
	marginTop = 48; // Сбрасываю отступ сверху	
	ctx.drawImage(sprite, 0, 0, 500, 310, 0, 0, 500, 310);
	for (var tc = 0; tc < textCount; tc++){
		line += text; // Формирую строку
	};
	for (var i = 0; i < 9; i++) {
		ctx.fillText(line, marginLeft, marginTop);
		marginTop += 18;
	};
	ctx.drawImage(sprite, 498, 128, 80, 180, 406, 118, 80, 180);		
};
});

а зачем sprite.onload = function() {
внутри оставили-?
просто оставьте

marginLeft = (500 - textWidth*textCount)/2+3; 
marginTop = 48;
ctx.drawImage(sprite, 0, 0, 500, 310, 0, 0, 500, 310);
....