Ошибка TypeError: canvas.getContext is not a function

Рейтинг: 0Ответов: 1Опубликовано: 19.04.2023

// не изменять
$(`.stat`).append(`<div data-type="volume"><div>`);
let elem = $(`.stat [data-type="volume"]`);
// не изменять


let canvas = elem.html('<canvas></canvas>').find('canvas');
let ctx = canvas.getContext('2d');
let width = canvas.offsetWidth * 2;
let height = canvas.offsetHeight * 2;

console.log(canvas, width, height);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stat"></div>

javascript canvas
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

elem - это jQuery объект.
.html - также возвращает jQuery объект.

У jQuery объектов нет метода getContext, поэтому и ошибка.

Для решения нужно получить HTMLElement из выборки jQuery, например с помощью метода .get, либо обращаясь просто по индексу

let canvas = elem.html('<canvas></canvas>').find('canvas').get(0);
let canvas = elem.html('<canvas></canvas>').find('canvas')[0];