Кто-нибудь знает, почему этот холст не работает?

Question

Кто-нибудь знает, почему этот холст не работает?

0

Нужно сделать сайт с холстом, но по какой-то причине ничего не показывает, он просто белый, где холст должен быть.. кто-нибудь знает почему? Есть и другие divs, "подталкивающие" полотно canvas для размещения.

На боковой ноте можно изменить размер холста при нажатии кнопки? Например: холст 100x100px. На экране есть кнопка. При нажатии изменяется размер холста.

HTML:

<section id="Body"> 

    <div id="OtherDiv"></div>

    <canvas id="Canvas">
        Update your browser!
    </canvas>

    <div id="anotherDiv"></div>

</section>

CSS:

#Canvas{
float: left;
    margin-left: 15px;}
}

JavaScript:

function first(){
    var c=document.getElementById("Canvas");
    var canvas = c.getContext("2d");
    ctx.fillRect(0,0,150,75);
}
window.addeventlistener("load", first, false);

user2961869 08 нояб. 2013, в 19:05

Источник

2

Возможно, потому что JavaScript чувствителен к регистру, поэтому ваш вызов должен быть window.addEventListener("load", first, false); ,
Justin Niessner 08 нояб. 2013, в 18:03
1

Вы также должны установить размеры тега canvas, чтобы убедиться, что он отображается правильно.
ArrayKnight 08 нояб. 2013, в 18:05

Теги:

javascript

html

css

canvas

1 ответ

Ещё вопросы

Возможно, потому что JavaScript чувствителен к регистру, поэтому ваш вызов должен быть window.addEventListener("load", first, false); ,
Вы также должны установить размеры тега canvas, чтобы убедиться, что он отображается правильно.

epascarello · Accepted Answer · 2013-11-08T16-37-00.000Z

Во-первых, нет addeventlistener. Дело имеет значение, это addEventListener.

Во вторых у вас нет переменной ctx.

function first(){
    var canvas = document.getElementById("Canvas");  // changed c to canvas
    var ctx = canvas .getContext("2d");  // changed canvas to ctx and c to canvas
    ctx.fillRect(0,0,150,75);
}
window.addEventListener("load", first, false);  //properly camel cased it

JSFiddle с кодом выше работает: jsfiddle.net/4qg3D