- I create canvas element on page, works is fine home page Screenshot
- When i want edit this page in Elementor frontend editor, canvas not work, in console error Uncaught TypeError: Cannot read properties of null (reading ‘appendChild’) Screenshot page with canvas in frontend editor
Any idea? Thanks!
Code create canvas
HTML
<div id="audio_visualizers"></div>
JS
var pieces, radius, fft, mapMouseX, mapMouseY, toggleBtn, audio, uploadBtn, uploadedAudio, uploadAnim;
var colorPalette = ["#000", "rgba(22, 59, 72, 0.5)", "#00a6e0", "#002a38"];
var uploadLoading = false;
var audioButton = true;
function preload() {
audio = loadSound("sound/Audio_Visualizers1-1.mp3");
}
function uploaded(file) {
uploadLoading = true;
uploadedAudio = loadSound(file.data, uploadedAudioPlay);
}
function uploadedAudioPlay(audioFile) {
uploadLoading = false;
if (audio.isPlaying()) {
audio.pause();
}
audio = audioFile;
audio.loop();
}
function setup() {
const canvasAudio = createCanvas(windowWidth, windowHeight);
canvasAudio.parent('audio_visualizers');
if (audioButton == true) {
toggleBtn = createButton("play");
toggleBtn.addClass("toggle-btn");
toggleBtn.parent('audio_visualizers');
toggleBtn.mousePressed(toggleAudio);
} else {
audio.loop()
}
fft = new p5.FFT();
}
function draw() {
background(colorPalette[0]);
noFill();
fft.analyze();
var bass = fft.getEnergy("bass");
var treble = fft.getEnergy("treble");
var mid = fft.getEnergy("mid");
var mapMid = map(mid, 0, 255, -radius, radius);
var scaleMid = map(mid, 0, 255, 1, 1.5);
var mapTreble = map(treble, 0, 255, -radius, radius);
var scaleTreble = map(treble, 0, 255, 1, 1.5);
var mapbass = map(bass, 0, 255, -100, 800);
var scalebass = map(bass, 0, 255, 0, 0.8);
mapMouseX = map(mouseX, 0, width, 4, 10);
mapMouseY = map(mouseY, 0, height, windowHeight / 4, windowHeight);
pieces = mapMouseX;
radius = mapMouseY;
translate(windowWidth / 2, windowHeight / 2);
strokeWeight(1);
for (i = 0; i < pieces; i += 0.5) {
rotate(TWO_PI / pieces);
/*---------- BASS ----------*/
push();
strokeWeight(5);
stroke(colorPalette[1]);
scale(scalebass);
rotate(frameCount * -0.5);
line(mapbass, radius / 2, radius, radius);
line(-mapbass, -radius / 2, radius, radius);
pop();
/*---------- MID ----------*/
push();
strokeWeight(0.5);
stroke(colorPalette[2]);
scale(scaleMid);
line(mapMid, radius / 2, radius, radius);
line(-mapMid, -radius / 2, radius, radius);
pop();
/*---------- TREMBLE ----------*/
push();
stroke(colorPalette[3]);
scale(scaleTreble);
line(mapTreble, radius / 2, radius, radius);
line(-mapTreble, -radius / 2, radius, radius);
pop();
}
}
function toggleAudio() {
if (audio.isPlaying()) {
audio.pause();
} else {
audio.play();
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
I think in Elementor frontend editor, DOM elements are created in an external window (iframe). And library p5.js can’t find div element and create canvas
