Skip to content

Instantly share code, notes, and snippets.

@Darkborderman
Last active May 23, 2018 01:25
Show Gist options
  • Save Darkborderman/2967050ad4222f69e90e56982c960a9d to your computer and use it in GitHub Desktop.
Save Darkborderman/2967050ad4222f69e90e56982c960a9d to your computer and use it in GitHub Desktop.
Retro game color palette
document.addEventListener('DOMContentLoaded',function(){
for(colorData in color) draw(colorData);
});
function draw(data){
let canvas=document.getElementById(data);
canvas.height=Config.tile.height;
canvas.width=Config.tile.width*color[data].length;
let context=canvas.getContext('2d');
for(let i=0;i<=color[data].length-1;i++)
{
context.fillStyle=color[data][i];
context.fillRect(50*i,
0,
Config.tile.width,
Config.tile.height);
}
}
let Config={
tile:{
height:50,
width:50,
},
};
let color={
green:[
'#003f00',
'#00c000',
],
green2:[
'#072f37',
'#0f4737',
'#27672f',
],
gba:[
'#1f1f1f',
'#4d533c',
'#8b956d',
'#c4cfa1',
],
greener:[
'#204631',
'#527f39',
'#aec440',
'#d7e894',
],
blue:[
'#2b0070',
'#4c94ff',
],
blackwhite:[
'#000000',
'#ffffff',
],
gray:[
'#212121',
'#525252',
]
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="plaette.css">
<script src=draw.js></script>
</head>
<body>
<section id="retro game">
<h4>green</h4>
<canvas id="green"></canvas>
<h4>green2</h4>
<canvas id="green2"></canvas>
<h4>GBA</h4>
<canvas id="gba"></canvas>
<h4>greener</h4>
<canvas id="greener"></canvas>
<h4>blue</h4>
<canvas id="blue"></canvas>
<h4>blackwhite</h4>
<canvas id="blackwhite"></canvas>
<h4>gray</h4>
<canvas id="gray"></canvas>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment