¡Una manzana roja y dorada!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Just an apple</title>
</head>
<body>
<div style="display: flex;">
<canvas width="700" height="850">
</canvas>
<div style="align-self: center;">
<button style="padding: 18px 48px;">Cambiar</button>
</div>
</div>
<script>
let bool = true;
let button = document.querySelector("button").addEventListener("click",()=>{
bool = !bool;
doDraw();
});
//Cambia el tamaño de la manzana (1 = max)
size = 3;
//Normal apple
const BROWN = 'rgb(139,69,19)';
const RED = 'rgb(230,0,3)';
const FIREBRICK = 'rgb(178,34,34)';
const DG = 'rgb(44,43,44)';
//Golden apple
const KHAKI = 'rgb(233,238,86)';
const GOLDENROD = 'rgb(218,162,17)';
const BLACK = 'rgb(25,25,25)';
const myWidth = (100/size)+0.8;
const myHeigth = (100/size)+0.8;
let canva = document.querySelector("canvas");
let pincel = canva.getContext("2d");
const peduncle = [[900,200],[900,300],[800,300],[800,400],[800,500],[800,600],[700,600]];
const appleInt =[
[600,600],[600,700],[500,700],[400,700],[700,700],[900,700],[400,800],[700,800],[800,800],[900,800],
[1000,800],[300,900],[300,1000],[300,1100],[400,1100],[500,1100],[600,1100],[700,1100],[800,1100],
[900,1100],[1000,1100],[300,1200],[400,1200],[500,1200],[600,1200],[700,1200],[800,1200],[900,1200],
[800,1300],[700,1300],[600,1300],[500,1300],[700,900],[600,900],[800,1000],[900,1000],[1000,1000],[1000,900],
[900,900],[800,900],[700,1000],[600,1000]
];
const appleR = [[800,700],[900,600],[1000,700],[1100,700],[1100,800],[1100,900],[1100,1000],
[1100,1100],[1100,1200],[1100,1300],[1100,1400],[1200,900],[1200,1000],[1200,1100],[1200,1200],
[1000,1400],[1000,1500],[900,1500],[900,1400],[800,1400],[700,1400],[600,1400],[500,1400],[400,1400],
[400,1300],[1000,1200],[1000,1300],[900,1300],[600,1500],[500,1500]];
const appleExt = [[600,500],[900,500],[1000,600],[1100,600],[700,500],[500,600],[400,600],[300,700],[300,800],
[200,900],[200,1000],[200,1100],[200,1200],[300,1300],[300,1400],[400,1500],[500,1600],[600,1600],[700,1500],
[800,1500],[900,1600],[1000,1600],[1100,1500],[1200,1400],[1200,1300],[1300,1100],[1300,1000],[1300,900],[1300,1100],
[1200,800],[1200,700],[1300,1200]];
let drawFill = (color,xy)=>{
pincel.fillStyle = color;
xy.forEach(position => {
pincel.fillRect(position[0]/size,position[1]/size,myWidth,myHeigth);
});
};
let doDraw = ()=>{
drawFill(bool?DG:BLACK,peduncle);
drawFill(bool?RED:KHAKI,appleInt);
drawFill(bool?FIREBRICK:GOLDENROD,appleR);
drawFill(DG,appleExt);
};
doDraw();
//white space
// pincel.fillRect(400,1000,myWidth,myHeigth);
// pincel.fillRect(400,900,myWidth,myHeigth);
//pincel.fillRect(500,1000,myWidth,myHeigth);
// pincel.fillRect(500,900,myWidth,myHeigth);
// pincel.fillRect(500,800,myWidth,myHeigth);
// pincel.fillRect(600,800,myWidth,myHeigth);
</script>
</body>
</html>
