Получение данных изображения из изображения php (imageTTFText), помещенного в HTML-холст

Question

Я создал изображение в файле с именем "gen_height.pht"

<?php
header("Content-type: image/png");

$font_file = "../../01 fonts/fonts Google/alef-bold.ttf";
$font_size = 300;
$text = "i";

$width = 400;
$height = 400;
$im = imageCreate ($width, $height);

$background_color = imagecolorallocate($im, 255, 255, 255);
$fontcolor = imagecolorallocate($im, 0, 0, 0);
imageTTFText ($im, $font_size, 0, 0, 400, $fontcolor, $font_file, $text);

imagepng($im);
imagedestroy($im);
?>

Теперь я помещаю это изображение в HTML-холст:

function load_canvas () {
    var canvas = document.getElementById('canvas_height');
    var context = canvas.getContext('2d');
    img_height = new Image();
    img_height.src = 'generators/gen_height.php';
    context.drawImage(img_height, 0, 0);
}

И после этого я хочу узнать образ (значения RGB), с:

function tester1() {
    var canvas = document.getElementById('canvas_height');
    var context = canvas.getContext('2d');
    DATA_TRIANGLE = context.getImageData(0, 0, 400, 400).data;
    text = '';
    var j = 0;
    var pixels = new Array(); 
    for (var i = 0; i < 6400; i++) {
        text += DATA_TRIANGLE[i] + ', ';
    }
    document.getElementById('testdiv').innerHTML = text;
}

• появляется изображение php
• но все эти изображения - 255 (вывод из функции tester1), как будто есть только белый фон
• когда я заменяю изображение php на обычное изображение jpg, оно работает и выдает конкретные rgb-данные

У кого-нибудь есть идея, почему я не получаю данные из php-изображения, пока они появляются?