How to use DOM if the site is running on CANVAS?

Question

JavaScript

How to interact with the DOM if the site uses CANVAS ? Just inside the tag, only the tag, and that's it.
I want to write a bot, for practice, but this is a game on Canvas :(. How can I interact with this tag?
On Network(F12) , I understand that some kind of GIF is being loaded from the server, but then how to explain that you can click on buttons, which, by the way, are also inside the Canvas, there is no way to define the DOM

!

Answer 1

JavaScript has a set of functions for working with Canvas.
Canvas_API
For example:

// получить DOM элемент "canvas"
var canvas = document.getElementById("canvas");

// объект, через который управляем изображением
// у него есть набор свойств и методов
var ctx = canvas.getContext("2d");

// цвет заливки
ctx.fillStyle = "green";

// нарисовать прямоугольник от координаты (x10, y10)
// шириной 150, и высотой 100
ctx.fillRect(10, 10, 150, 100);

Ta-daaam
A HERE is one of the many libraries that helps you work with Canvas at a higher level.
For example, you can draw a picture in Illustrator or Coral, export it to svg, and import it into javaScript, from where you can get and change any image element, handle events (click, hover, ...), animate elements.
// UPD
If you look at the image svg code, you can see an xml document in which image elements are represented as tags, and some properties as a "style sheet"

...
<style type="text/css">
  <![CDATA[
    .fil0 {fill:#8A2628}
    .fil1 {fill:#AC3A39}
  ]]>
</style>
...
<g id="001">
  <polygon class="fil0" points="24,89 52,89 54,91 52,93 24,93 "/>
  <polygon class="fil1" points="28,86 30,86 30,96 28,96 "/>
  <polygon class="fil1" points="31,86 33,86 33,96 31,96 "/>
</g>

A points="24,89 52,89 54,91 52,93 24,93 "are the coordinates on the plane. A curve will be drawn over them, and the fill will be colored #AC3A39.
So besides javaScript, some properties can be controlled via css. And svg is a markup file on which you can draw canvas

Answer 2

Something has to render the data in this Cancas. Study the source code, if the executable code is accessible somehow from the outside (not entirely in a closure without external links), then you will have to deal with the API and interact with it.
Obviously, there is no point in interacting with the DOM, because from the DOM there is only an audit tag<canvas>