Fantasy
Mystery
Romance
Science Fiction
Drama
Fiction
const colors = {
fantasy: ['#4a148c', '#311b92'],
mystery: ['#263238', '#37474f'],
romance: ['#d81b60', '#c2185b'],
scifi: ['#1a237e', '#283593'],
drama: ['#795548', '#4e342e'],
fiction: ['#009688', '#004d40']
};
function generateCover() {
const canvas = document.getElementById('coverCanvas');
const ctx = canvas.getContext('2d');
const title = document.getElementById('bookTitle').value;
const author = document.getElementById('authorName').value;
const style = document.getElementById('coverStyle').value;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background gradient
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, colors[style][0]);
gradient.addColorStop(1, colors[style][1]);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Overlay effect
ctx.fillStyle = 'rgba(0,0,0,0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw design elements first (behind text)
drawDesign(ctx, style);
// Draw title
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
const fontSize = Math.min(40, 400 / (title.length * 0.5));
ctx.font = `bold ${fontSize}px Arial`;
wrapText(ctx, title, canvas.width / 2, canvas.height / 3, canvas.width - 40, fontSize);
// Draw author name
ctx.font = 'italic 20px Arial';
ctx.fillText(`by ${author}`, canvas.width / 2, canvas.height - 50);
}
function generateBackCover() {
const canvas = document.getElementById('backCoverCanvas');
const ctx = canvas.getContext('2d');
const summary = document.getElementById('bookSummary').value;
const style = document.getElementById('coverStyle').value;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background gradient
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, colors[style][0]);
gradient.addColorStop(1, colors[style][1]);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Overlay effect
ctx.fillStyle = 'rgba(0,0,0,0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw summary text
ctx.fillStyle = 'white';
ctx.textAlign = 'left';
ctx.font = '18px Arial';
wrapText(ctx, summary, 20, 50, canvas.width - 40, 25, 5); // Limit to 5 lines
// Optional: Add some decoration or design elements for the back cover
drawDesign(ctx, style);
}
function wrapText(ctx, text, x, y, maxWidth, lineHeight, maxLines) {
const words = text.split(' ');
let line = '';
let lines = 0;
for (let n = 0; n maxWidth && n > 0) {
ctx.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
lines++;
if (maxLines && lines >= maxLines) {
if (n < words.length - 1) {
line += '...';
}
break;
}
} else {
line = testLine;
}
}
ctx.fillText(line, x, y);
}
function drawDesign(ctx, style) {
ctx.strokeStyle = 'rgba(255,255,255,0.3)';
ctx.fillStyle = 'rgba(255,255,255,0.3)';
ctx.lineWidth = 2;
switch (style) {
case 'fantasy':
for (let i = 0; i < 3; i++) {
ctx.beginPath();
ctx.arc(200, 250, 50 + i * 30, 0, Math.PI * 2);
ctx.stroke();
}
for (let i = 0; i < 20; i++) {
drawStar(ctx, Math.random() * 400, Math.random() * 600, 5, 10, 5);
}
break;
case 'mystery':
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
let angle = 0;
let radius = 5;
ctx.beginPath();
ctx.moveTo(200, 300);
for (let i = 0; i < 200; i++) {
angle += 0.1;
radius += 0.5;
const x = 200 + radius * Math.cos(angle);
const y = 300 + radius * Math.sin(angle);
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.font = '40px Arial';
for (let i = 0; i < 5; i++) {
ctx.fillText('?', 50 + Math.random() * 300, 100 + Math.random() * 400);
}
break;
case 'romance':
for (let i = 0; i < 5; i++) {
drawHeart(ctx, 100 + Math.random() * 200, 100 + Math.random() * 400, 20 + Math.random() * 20);
}
for (let i = 0; i < 3; i++) {
drawSwirl(ctx, 50 + i * 150, 500, 30);
}
break;
case 'scifi':
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 12; j++) {
drawHexagon(ctx, 50 + i * 45, 50 + j * 45, 20);
}
}
for (let i = 0; i < 5; i++) {
drawCircuitLine(ctx, Math.random() * 400, Math.random() * 600, 100 + Math.random() * 100);
}
break;
case 'drama':
ctx.lineWidth = 3;
for (let i = 0; i < 4; i++) {
ctx.beginPath();
ctx.arc(150 + Math.random() * 100, 200 + Math.random() * 200, 50 + Math.random() * 30, 0, Math.PI * 2);
ctx.stroke();
}
for (let i = 0; i < 8; i++) {
ctx.beginPath();
ctx.moveTo(0, 100 + i * 60);
ctx.quadraticCurveTo(200, 150 + Math.random() * 300, 400, 100 + i * 60);
ctx.stroke();
}
break;
case 'fiction':
for (let i = 0; i < 15; i++) {
for (let j = 0; j 0.5) {
ctx.beginPath();
ctx.arc(30 + i * 25, 30 + j * 25, 2, 0, Math.PI * 2);
ctx.fill();
}
}
}
for (let i = 0; i < 5; i++) {
ctx.beginPath();
ctx.moveTo(0, 100 + i * 100);
ctx.bezierCurveTo(100, 50 + i * 100, 300, 150 + i * 100, 400, 100 + i * 100);
ctx.stroke();
}
break;
}
}
function drawStar(ctx, x, y, spikes, outerRadius, innerRadius) {
let rot = Math.PI / 2 * 3;
let step = Math.PI / spikes;
ctx.beginPath();
ctx.moveTo(x, y - outerRadius);
for (let i = 0; i < spikes; i++) {
ctx.lineTo(x + Math.cos(rot) * outerRadius, y + Math.sin(rot) * outerRadius);
rot += step;
ctx.lineTo(x + Math.cos(rot) * innerRadius, y + Math.sin(rot) * innerRadius);
rot += step;
}
ctx.lineTo(x, y - outerRadius);
ctx.closePath();
ctx.fill();
}
function drawHeart(ctx, x, y, size) {
ctx.beginPath();
ctx.moveTo(x, y + size * 0.3);
ctx.bezierCurveTo(x, y, x - size, y, x - size, y + size * 0.3);
ctx.bezierCurveTo(x - size, y + size * 0.6, x, y + size * 1.1, x, y + size * 1.1);
ctx.bezierCurveTo(x, y + size * 1.1, x + size, y + size * 0.6, x + size, y + size * 0.3);
ctx.bezierCurveTo(x + size, y, x, y, x, y + size * 0.3);
ctx.fill();
}
function drawSwirl(ctx, x, y, size) {
ctx.beginPath();
let angle = 0;
let radius = 1;
ctx.moveTo(x, y);
for (let i = 0; i < 50; i++) {
angle += 0.5;
radius += 0.5;
const newX = x + radius * Math.cos(angle);
const newY = y + radius * Math.sin(angle);
ctx.lineTo(newX, newY);
}
ctx.stroke();
}
function drawHexagon(ctx, x, y, size) {
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const angle = (Math.PI / 3) * i;
const xPoint = x + size * Math.cos(angle);
const yPoint = y + size * Math.sin(angle);
if (i === 0) ctx.moveTo(xPoint, yPoint);
else ctx.lineTo(xPoint, yPoint);
}
ctx.closePath();
ctx.stroke();
}
function drawCircuitLine(ctx, x, y, length) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + length/2, y);
ctx.lineTo(x + length/2, y + 20);
ctx.lineTo(x + length, y + 20);
ctx.stroke();
// Add circuit node
ctx.beginPath();
ctx.arc(x + length/2, y + 20, 3, 0, Math.PI * 2);
ctx.fill();
}
function downloadCover() {
const canvas = document.getElementById('coverCanvas');
const link = document.createElement('a');
link.download = 'book-cover.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
// Initial generation
generateCover();
AI Hanaz Writers version 1.0 is currently available. Version 2.0, a more advanced and purchasable upgrade, is currently being designed and prepared.