Changing image color in ahk/html script

Question

I'm currently using autohotkey to create a game. And I want to include pictures in this game and want to change the color of them and their background.

I have tried a couple things and so far all of them create problems in the autohotkey window.

Filters of any kind don't seem to do anything. Not even on a colored image

Changing the color in a canvas is extremely slow (ranging from 30 seconds to 5 minutes per image)

I tried turning the image in a svg but so far all sites I found that do that change the image to a more vector-ish look which I do not want.

And the solution I'm trying now is turning the picture into a font and changing its color that way however doing various things on my computer just stops the script from loading the font until I restart my pc. One example is saving an image on my computer.

Here is a link with a testing script, font and html file that I'm trying to use right now Link

Autohotkey script.

#NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
; #Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.
htmlpath := A_scriptdir . "\Htmlfile.html"
gui Picture_Loader:default
gui, add, edit, h0 w0
gui, font, s10
gui +Border +lastfound
menuwidth := A_screenwidth / 3
menuheight := A_screenheight / 2

Gui, Add, ActiveX, x0 y0 w%menuwidth% h%menuheight% vmenu, Shell.Browser
menu.navigate(htmlpath)
gui, show
return

F11::
Reload
return

Html file

<!DOCTYPE html>
<html>
    <head>
        <title>a</title>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <style type=text/css>
            html {
                overflow:hidden;
                height:100%;
            }
            body {
                background:#888888;
                width:100%;
                height: 100%;
            }
            @font-face {
                font-family:'Myfont';
                src:url('opensans-bold.woff') format('woff');
            }
            .custom{
                font-family:'Myfont';
            }
        </style>
    </head>
    <body>
        <p class='custom'>Aa</p>
    </body>
</html>

If someone has a solution to any of my problems. Please tell me. A way of making the font work consistently, a site that turns images into svg's without changing them, or speeding up the canvas color changing to managable levels would all solve this. Issue

Joe DF Joe DF · Accepted Answer · 2018-12-18T17:00:00

It seems like you are trying to make a js/html based game that runs on top of Windows using AutoHotkey. You might want to look into webapp.ahk or the more general tutorial which is designed to help with this kind of thing. If you were to do more graphics dedicated programing, it be better to use something like GDI+ or even a premade AHK tile-based game engine such as Project 2D. For the font issue, you might have to use an absolute path. And if possible, try with a fontface you know works normally to test it, such as one from FontSquirrel. Another option, might be use an SVG format font instead or try converting it to TTF.

Either way, here are options to manipulating graphics:

SVG graphics: you can use a js SVG-library like SVG.js to do the animation work, etc.
js canvas: import the resources into a canvas and modify things from there, or
using system graphics such as GDI+ to do all the work.

Changing image color in ahk/html script

2 Answers