What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Html and JavaScript refuses to run properly. (Solved)

Graeme Lawrie

New member
Hello everyone. Racking my brain and I know I'm missing something simple.

I have a simple index.html and a supporting script.js this links to graemelawrie.co.uk which is my test server.

The page works fine in testing local, but for the life of me I cannot get it to work online.

Can anyone put me out of my misery? the site is live and not working :( at Graemelawrie.co.uk

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Image Generator</title>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
display: flex;
justify-content: center;
.container {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: flex;
max-width: 800px;
.options {
flex: 1;
padding-right: 20px;
.graphic {
flex: 1;
text-align: center;
label, .explanation {
margin-top: 10px;
display: block;
color: #333;
input[type="number"], input[type="text"], select, input[type="color"], input[type="file"] {
padding: 10px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ddd;
width: calc(100% - 22px);
input[type="button"] {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
input[type="button"]:hover {
background-color: #0056b3;
.form-section {
margin-bottom: 20px;
<div class="container">
<div class="options">
<form id="variableForm">
<div class="form-section">
<label for="variable1">Select Variable 1:</label>
<select id="variable1">
<option value="explore">Explore</option>
<option value="deepen">Deepen</option>
<option value="apply">Apply</option>
<option value="teach">Teach</option>
<option value="lead">Lead</option>
<span class="explanation">Choose the first variable to influence the background image.</span>

<div class="form-section">
<label for="variable2">Select Variable 2:</label>
<select id="variable2">
<option value="informal">Informal</option>
<option value="training">Training</option>
<option value="certified">Certified</option>
<option value="membership">Membership</option>
<option value="qualification">Qualification</option>
<span class="explanation">Choose the second variable to further refine the background image choice.</span>

<div class="form-section">
<label for="overlayText">Overlay Text (Line 1):</label>
<input type="text" id="overlayText" placeholder="Enter overlay text">
<span class="explanation">Enter the first line of text you want to overlay on the image.</span>

<div class="form-section">
<label for="overlayText2">Overlay Text (Line 2):</label>
<input type="text" id="overlayText2" placeholder="Enter second line of text">
<span class="explanation">Enter the second line of text to display below the first line.</span>

<div class="form-section">
<label for="overlayText3">Overlay Text (Line 3):</label>
<input type="text" id="overlayText3" placeholder="Enter third line of text">
<span class="explanation">Enter the third line of text to display below the second line.</span>

<div class="form-section">
<label for="textPosY">Text Vertical Position (px):</label>
<input type="number" id="textPosY" value="260">
<span class="explanation">Adjust the vertical position of your text on the image.</span>

<div class="form-section">
<label for="textColour">Text Colour:</label>
<input type="color" id="textColour" value="#000000">
<span class="explanation">Choose the colour of your overlay text.</span>

<div class="form-section">
<label for="logoUpload">Upload Logo:</label>
<input type="file" id="logoUpload" accept="image/*">
<span class="explanation">Upload a logo to display on the image. PNG or JPEG recommended.</span>

<div class="form-section">
<label for="logoPosY">Logo Vertical Position (px):</label>
<input type="number" id="logoPosY" value="50">
<span class="explanation">Adjust the vertical position of your logo on the image.</span>

<input type="button" value="Generate" onclick="generateImage()">

<div class="graphic">
<canvas id="imageCanvas" width="400" height="400" style="border: 1px solid #ddd;"></canvas>

<script src="script.js"></script>

And my script:

function generateImage() {
const variable1 = document.getElementById('variable1').value;
const variable2 = document.getElementById('variable2').value;
const overlayText = document.getElementById('overlayText').value;
const overlayText2 = document.getElementById('overlayText2').value;
const overlayText3 = document.getElementById('overlayText3').value;
const textPosY = parseInt(document.getElementById('textPosY').value, 10);
const textColour = document.getElementById('textColour').value;
const logoPosY = parseInt(document.getElementById('logoPosY').value, 10);
const logoUpload = document.getElementById('logoUpload').files[0];

const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

// Center text horizontally
ctx.font = '20px Arial';
ctx.fillStyle = textColour;
ctx.textAlign = 'center'; // Center the text horizontally
ctx.fillText(overlayText, canvas.width / 2, textPosY);
ctx.fillText(overlayText2, canvas.width / 2, textPosY + 30); // Adjust vertical spacing
ctx.fillText(overlayText3, canvas.width / 2, textPosY + 60); // Adjust vertical spacing

if (logoUpload) {
const reader = new FileReader();
reader.onload = function(e) {
drawLogo(ctx, e.target.result, logoPosY);
image.src = selectImage(variable1, variable2);

function selectImage(variable1, variable2) {
return `${variable1}_${variable2}.png`;

function drawLogo(ctx, logoImage, posY) {
const logo = new Image();
logo.onload = function() {
// Adjust logo size and center it horizontally
const scaledWidth = logo.width / 2;
const scaledHeight = logo.height / 2;
const posX = (ctx.canvas.width - scaledWidth) / 2;
ctx.drawImage(logo, posX, posY, scaledWidth, scaledHeight);
logo.src = logoImage;
}// JavaScript Document