Показать Canvas как картинка (в теге <img>)

Получить картинку из <canvas> можно через метод toDataURL(), который возвращает картинку в формате base64.

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");

// рисование
context.beginPath();
ctx.arc(35, 35, 30, 30, true);
context.closePath();
ctx.fill();
context.strokeStyle = '#0000ff';
context.stroke();
 
var scrImg = canvas.toDataURL("image/png");
document.write("<img src='" + scrImg + "'>");

Метод toDataURL() должен применяться к объекту canvas, а не к ctx.

В PHP картинку можно сохранить через следующий код:

$base64 = 'base64, переданный через JavaScript (переменная выше scrImg)';
// вырезаем информацию о картинке, например - data:image/png;base64,
$image = substr($base64, strpos($base64, ','));
// сохранение картинки как «img-from-canvas.png»
file_put_contents('img-from-canvas.png', base64_decode($image));

Пример кода на JSFiddle