Da Wikipedia, l'enciclopedia libera.
L'elemento fu inizialmente introdotto da Apple per uso all'interno del loro componente macOS WebKit, per migliorare applicazioni come Dashboard widgets ed il browser Safari.
Più tardi venne adottato dai browser Gecko (Mozilla e Firefox) e Opera[1], e poi standardizzato dal WHATWG su nuove specifiche proposte per le tecnologie della prossima generazione.
Il Canvas consiste in una regione disegnabile, definita in codice HTML con gli attributi height and width. Il codice JavaScript può accedere all'area con un set completo di funzioni per il disegno, simili a quelle comuni ad altre API 2D, permettendo così la generazione dinamica di disegni. Alcuni usi possibili di Canvas includono i grafici, l'animazione e la composizione di immagini.
Il codice seguente crea un elemento Canvas in una pagina HTML:
<canvas id="example" width="200" height="200">
Questo testo viene mostrato se il browser non supporta i canvas.
</canvas>
Utilizzando JavaScript è possibile aggiungere dei disegni; ad esempio, questo codice disegna un rettangolo rosso sullo schermo:
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
L'API Canvas fornisce anche save()e restore(), per salvare e ripristinare tutti gli attributi del contesto canvas.
Canvas può essere formattato mediante CSS:
{
window.location.href =
'/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_'))
+ '?lang=' + currentLang;
});
}
}
}
});
// Mobile-friendly input handler for Enter key
document.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
const searchInput = e.target.closest('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]');
if (searchInput) {
e.preventDefault();
const searchTerm = searchInput.value.trim();
if (searchTerm) {
const currentLang = getCurrentLanguage();
const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang;
const userId = localStorage.getItem('currentUserId'); // Get from localStorage
if (!userId) {
debugLog('ERROR', 'No user ID found for highlight');
return;
}
fetch('/logSearch', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl })
}).then(() => {
window.location.href =
'/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_'))
+ '?lang=' + currentLang;
});
}
}
}
});
// Search button click handler
document.addEventListener('click', e => {
const searchButton = e.target.closest('#searchButton, .search-button, .cdx-search-input__end-button, .header-search, .search-icon, [type="submit"]');
if (searchButton) {
e.preventDefault();
const searchForm = searchButton.closest('form');
if (searchForm) {
const searchInput = searchForm.querySelector('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]');
if (searchInput) {
const searchTerm = searchInput.value.trim();
if (searchTerm) {
const currentLang = getCurrentLanguage();
const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang;
const userId = localStorage.getItem('currentUserId'); // Get from localStorage
if (!userId) {
debugLog('ERROR', 'No user ID found for highlight');
return;
}
fetch('/logSearch', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl })
}).then(() => {
window.location.href =
'/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_'))
+ '?lang=' + currentLang;
});
}
}
}
}
});
});
