Exemplo de manipulação de elementos dentro de um canvas

Front-end JavaScript
#1

Boa noite galera,
eu gostaria de saber como manipular vários elementos dentro de um canvas, por isso gostaria de saber como pegar esses elementos dentro do canvas. Bem, eu não estou especificando o que manipular porque é para exemplo para mim poder ter como base para mim buscar. Fiquem a vontade para me passar referencias. Obrigado.

#2

Trabalhar com canvas e suas formas não é similar a trabalhar com elementos de tags. Quando adicionamos um elemento ao DOM com uma tag, este irá aparecer na DOM tree e poderá ser manipulado pelo JavaScript, quando criamos um canvas tudo que desenhamos dentro dele não terá representação dentro do DOM tree, o que indica que não podemos chamá-los no JavaScript como fazemos com tags comuns.
Quando criamos imagens com canvas a única forma de mudar seus estados é apagando e redesenhando-as em suas novas posições.

Exemplo simples de um canvas:

HTML
<canvas id="desenho" width="250" height="350" style="border:1px solid #000000">

JS

    var canvas = document.getElementById('desenho');
    var context = canvas.getContext('2d');

        context.beginPath();
        context.fillStyle = '#f39c12';
        context.moveTo(125,10);
        context.lineTo(10,10);
        context.lineTo(14,200);
        context.lineTo(125,245);
        context.lineTo(236,200);
        context.lineTo(240,10);
        context.fill();

        context.beginPath();
        context.fillStyle = '#f1c40f';
        context.moveTo(125,240);
        context.lineTo(231,195)
        context.lineTo(235,15)
        context.lineTo(125,15)
        context.fill();

        context.beginPath();
        context.fillStyle = '#ffffff';
        context.font = '140px Arial';
        context.fillText('J',40,155);
        context.fillText('S',135,155);


    var gradient = context.createLinearGradient(0,0,canvas.width,0);
        
        gradient.addColorStop("0","#34495e");
        gradient.addColorStop("1","#2980b9");
        context.fillStyle = gradient;
        context.font = "20px Consolas";

        context.fillText('Desenho',80,300);