Modifying HTML Canvas element created by an app

Store Design
, , , ,
1

I am using an app that will add html canvas element, my question is:

1- how to locate where in the theme files I can locate the canvas element?

2- I created a JS file and saved it in assets to modify the text in the canvas, I called the file in theme.liquid, but I don’t think it is working

this is the JS file, not sure if the syntax is correct:

var canvas = document.getElementByClassName('lower-canvas');
var ctx = canvas.getContext('2d');

ctx.font = '20px Arial';
ctx.letterSpacing = 0;
ctx.fillText('Hello, world!', 10, 50);

Here is how I call it in theme.liquid

<script src="{{ 'CANVAS_FIX.js' | asset_url }}" defer="defer"></script>

Nothing happen when I add this, so what should I do?

2

  1. Verify the file name and location: Double-check that the JavaScript file is named CANVAS_FIX.js and is located in the “assets” folder of your Shopify theme. This is where custom JavaScript files are typically stored.

  2. Ensure correct script inclusion: In your theme.liquid file, make sure the script tag is included in the appropriate location. Typically, it is added before the closing </body> tag or within the <head> section. Here’s an example:
3

if the canvas element is added via 3rd party app then you won’t find it inside your theme code. Also, I guess for your script should be executed after the execution of third party app. So, please try adding your script after {{ content_for_header }} (this is where all app scripts and Shopify internal scripts are present }}

For app code, You can try inspecting the code from browser developer settings. Just browse to that particular canvas element > right click > click inspect.