Canvas na imagem

Boa noite! Tenho o seguinte código:

<div id="anterior">
            <img src="_imagens/anterior.png" alt="anterior" usemap="#local" class="img-anterior-posterior">                           
                <map name="local">
                    <area shape="rect" coords="142,284,185,308" href="#" alt="JE" onclick="localDor('Joelho Esquerdo')">
                    <area shape="rect" coords="209,284,249,308" href="#" alt="JD" onclick="localDor('Joelho Direito')">
                </map>    
        </div>

E gostaria de que quando ao clicar na coordenada informada acima alterasse a cor somente daquele local específico. Qual é a maneira correta de envolver a imagem dentro do canvas para fazer as alterações necessárias? Obrigado