HTML 5 Canvas + JQuery + Rails 5.2 - не рисовать на Canvas?

Question

Я могу, чтобы холст отображал основной вывод .html, например " Hello world! ", но он не рисует никаких фигур.

Многие учебники и видео, которые я видел, пишут сценарии на простом Javascript. Есть ли вероятность, что проблема связана с моим использованием JQuery? Кроме того, для простоты и соответствия количества демонстраций я выделил стиль ...

canvas_test.html.erb

<h1>HTML5 Canvas Playground</h1>
<section id="canvas" style='border: 1px solid, width: 800px; height: 600px;'>
  <canvas>
    Your browser does not support Canvas. Please upgrade your browser to proceed...
  </canvas>
</section>

Когда дело доходит до Javascript / JQuery ...

• Это работает, поскольку выводит текст внутри элемента #canvas

canvas_test.coffee.js

$(document).on('turbolink:load', function() {    
var canvas = $("#canvas");    
canvas.html("<b>Hello world!</b>");  });

• Это НЕ работает и даже заходит так далеко, что больше не отображает оригинальный «Hello world!» ...

canvas_test.coffee.js

 $(document).on('turbolink:load', function() {
   var canvas = $("#canvas");
   var context = canvas.getContext('2d');

   canvas.html("<b>Hello world!</b>");
   context.fillStyle = 'blue';
   context.fillRect(250, 50, 100, 100);
 });

Есть идеи, что я здесь пропускаю? Спасибо за помощь!

Answer 1

Здесь есть несколько проблем:

1. Ваша переменная canvas jQuery не , выбирающая фактический элемент HTML canvas, а скорее section, который переноситэлемент HTML canvas.
2. Даже если вы выбираете фактический элемент canvas, вы будете работать с представлением jQuery этого элемента, а не с самим этим элементом.Это приведет к ошибке вроде canvas.getContext is not a function.Для работы с элементом DOM, который представляет переменная jQuery, вы можете использовать canvas[0], а затем вызвать getContext следующим образом: canvas[0].getContext('2d').
3. Вы не видите текст "Hello world"потому что функция выдает ошибку в результате # 1 и / или # 2.Даже если вы решите эти проблемы, вы все равно не увидите этот текст, потому что размещение этого текста внутри элемента canvas не отобразит его на холсте.Если вы хотите увидеть этот текст на вашем canvas, вам нужно сделать что-то вроде: context.fillText("Hello World",10,50)

Собрав все это вместе, ваш HTML должен выглядеть так:

<h1>HTML5 Canvas Playground</h1>
<section style='border: 1px solid, width: 800px; height: 600px;'>
  <canvas id="canvas" >
    Your browser does not support Canvas. Please upgrade your browser to proceed...
  </canvas>
</section>

И ваш JavaScript должен выглядеть следующим образом:

var canvas = $("#canvas");
var context = canvas[0].getContext('2d');
context.fillStyle = 'blue';
context.fillRect(250, 50, 100, 100);
context.font = "12px Arial";
context.fillText("Hello World",10,50); 

Я создал CodePen с указанным выше кодом, чтобы вы могли видеть его в действии.