\
**Category:** Ask us anything\
**Created:** [February 4, 2024, 6:35am UTC](https://community.weweb.io/t/code-works-on-the-html-editor-but-not-into-weweb/6807 "2024-02-04T06:35:24Z")\
**Posts on this page:** 8\
**Page:** 1
**Author:**  [@thinkcloud](https://community.weweb.io/u/thinkcloud)\
**Post date:** [February 4, 2024, 6:35am UTC](https://community.weweb.io/t/code-works-on-the-html-editor-but-not-into-weweb/6807/1 "2024-02-04T06:35:24Z")
Hello, This code works on the HTML editor, I can draw on an image (what the code does), but when I paste this code into an HTML element inside a web page, it doesn’t work , you know why ?
[https://codepen.io/theocouetfr/pen/RwdyqqV](https://codepen.io/theocouetfr/pen/RwdyqqV)
---
**Author:**  [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [February 4, 2024, 10:28am UTC](https://community.weweb.io/t/code-works-on-the-html-editor-but-not-into-weweb/6807/2 "2024-02-04T10:28:38Z")
here you can read why:
> **[Document: DOMContentLoaded event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event#checking_whether_loading_is_already_complete)**
>
> The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (
---
**Author:**  [@thinkcloud](https://community.weweb.io/u/thinkcloud)\
**Post date:** [February 4, 2024, 11:13am UTC](https://community.weweb.io/t/code-works-on-the-html-editor-but-not-into-weweb/6807/3 "2024-02-04T11:13:53Z")
Hello @dorilama and thank you very much for your help.
I’m not an expert in javascript but I seem to have fixed the code with the help of your documentation, unfortunately it still doesn’t seem to work.
It still works on codepen but not when I add it in weweb. Do you have another idea, or have I really corrected it according to your documentation?
thanks in advance.
[https://codepen.io/theocouetfr/pen/RwdyqqV](https://codepen.io/theocouetfr/pen/RwdyqqV)
---
**Author:**  [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [February 4, 2024, 3:57pm UTC](https://community.weweb.io/t/code-works-on-the-html-editor-but-not-into-weweb/6807/4 "2024-02-04T15:57:38Z")
it can be many things. my suggestion is to always use js actions if you need to run code so you can decide when it runs. If you need an element to be in the page you have now the onmount workflow trigger, so it’s easier to know when you can run the code.
---
**Author:**  [@thinkcloud](https://community.weweb.io/u/thinkcloud)\
**Post date:** [February 5, 2024, 6:51am UTC](https://community.weweb.io/t/code-works-on-the-html-editor-but-not-into-weweb/6807/5 "2024-02-05T06:51:47Z")
Thank you for your response @dorilama , I tried to add the javascript code to a workflow when I pressed a button below my image to be sure to launch the script later, but it doesn’t work.
i also try to add javascript on monted component, same problem, i’m lost
---
**Author:**  [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [February 5, 2024, 2:13pm UTC](https://community.weweb.io/t/code-works-on-the-html-editor-but-not-into-weweb/6807/6 "2024-02-05T14:13:00Z")
Hi, you can try to replace every reference to “document” by “wwLib.getFrontDocument()” instead
For me it’s working (with the on mounted method)
I used this code
```auto
function initializeCanvas() {
const canvas = wwLib.getFrontDocument().getElementById('drawing-canvas');
const ctx = canvas.getContext('2d');
const container = wwLib.getFrontDocument().getElementById('drawing-container');
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
let drawing = false;
function startDrawing(e) {
drawing = true;
draw(e);
}
function stopDrawing() {
drawing = false;
ctx.beginPath();
}
function draw(e) {
if (!drawing) return;
ctx.lineWidth = 25;
ctx.lineCap = 'round';
ctx.strokeStyle = 'red';
const rect = canvas.getBoundingClientRect();
ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
}
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mousemove', draw);
}
initializeCanvas();
```
---
**Author:**  [@thinkcloud](https://community.weweb.io/u/thinkcloud)\
**Post date:** [February 5, 2024, 3:48pm UTC](https://community.weweb.io/t/code-works-on-the-html-editor-but-not-into-weweb/6807/7 "2024-02-05T15:48:55Z")
> [@Alexis](#):
>
> wwLib.getFrontDocument()
thank you for your valuable help, with your response I was able to see that there was a blog article and other questions on this subject. I’m not knowledgeable enough to understand why it’s necessary to replace it with that, but I’ll try to read the documentation to understand.
thanks again
---
**Author:**  [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [February 6, 2024, 9:57am UTC](https://community.weweb.io/t/code-works-on-the-html-editor-but-not-into-weweb/6807/8 "2024-02-06T09:57:24Z")
You’re welcome, that’s because in the editor your app is displayed inside an iframe but your custom code is executed inside the editor.
So for your code to target your app we have some snipped like `wwLib.getFrontWindow()` or `wwLib.getFrontDocument()`
So instead of doing window. or document. you have to use these snippets, otherwise it will target the editor, not your app.